安卓Design包之TabLayout控件的使用

转自:

安卓Design包之TabLayout控件的简单使用

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件。最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2。这不得不说是一个良心之作。

使用方法很简单,只需要添加一句依赖

compile ‘com.android.support:design:24.0.0‘

首先带来的是TabLayout

Tab滑动切换View并不是一个新的概念,但是Google却是第一次在support库中提供了完整的支持,
而且,Design library的TabLayout 既实现了固定的选项卡 - view的宽度平均分配,
也实现了可滚动的选项卡 - view宽度不固定同时可以横向滚动。选项卡可以在程序中动态添加,
但大部分时间我们都不会这样用,通常滑动布局都会和ViewPager配合起来使用,所以,我们需要ViewPager来帮忙:
通过一句话setupWithViewPager,我们就把ViewPager和TabLayout结合了起来。

layout_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="fanggao.qf.tablelayouttest.MainActivity">

   <FrameLayout
        android:id="@+id/fl_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </FrameLayout>
</RelativeLayout>

layout_fragmentxml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
   <android.support.design.widget.TabLayout
       android:id="@+id/tl_title"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:background="#ffffff"
       app:tabIndicatorColor="#0000ff"
       app:tabTextColor="#000000"
       app:tabSelectedTextColor="#0000ff"
       app:tabMode="fixed">
<!--    app:tableIndicatorColor = "#0000ff" 设置下划线的颜色
       app:tabTextColor="#000000"        设置文本颜色
       app:tabSelectedTextColor="#0000ff" 设置选择时文本颜色
       app:tabMode="scrollable"   模式:scrollable横向滚动 fixed 填充,不能滚动
       -->
   </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity:

添加碎片文件

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //加载fragment
        getSupportFragmentManager().beginTransaction().add(R.id.fl_layout,new MainFragment()).commit();

    }
}

MainFragment:

设置显示内容(添加了tabLayout与viewPager)

public class MainFragment extends Fragment {
    private TabLayout tbTitle;
    private ViewPager vpFragments;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.fragment_main, container,false);
        tbTitle = (TabLayout) inflate.findViewById(R.id.tl_title);
         vpFragments = (ViewPager) inflate.findViewById(R.id.vp_fragment);
        initView();

        return inflate;
    }

    private void initView() {    //碎片集合
        ArrayList<Fragment> fragmentList = new ArrayList<>();    //标题集合
        ArrayList<String> titles = new ArrayList<>();
        String[] titleRes = new String[]{"推荐","排行","歌单","电台","MV"};
        for (int j = 0; j < titleRes.length; j++) {
            titles.add(titleRes[j]);
        }
        for (int i = 0; i < titleRes.length; i++) {
            TestFragment testFragment = new TestFragment();
            Bundle bundle = new Bundle();
            bundle.putString("VALUE",titleRes[i]);
            testFragment.setArguments(bundle);
            fragmentList.add(testFragment);
        }
    //创建并设置适配器
        TestFragmentAdapter testFragmentAdapter = new TestFragmentAdapter(getActivity().getSupportFragmentManager(), fragmentList, titles);
        vpFragments.setAdapter(testFragmentAdapter);

        //将Tablelayout与viewPager绑定
        tbTitle.setupWithViewPager(vpFragments);
    }
}

TestFragmentAdapter:

public class TestFragmentAdapter extends FragmentPagerAdapter {
    private  List<Fragment> fragmentList;
    private  List<String>titles;
    public TestFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList,List<String>titles) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    /**
     * 将标题头与viewPager绑定
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

TestFragment(添加到viewPager中显示内容的碎片)

public class TestFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View inflate = inflater.inflate(R.layout.fragment_test1, container, false);        Bundle bundle = getArguments();        String value = bundle.getString("VALUE");        Log.i("tag", "onCreateView: "+value);        TextView tvText = (TextView) inflate.findViewById(R.id.tv_textFragment);        tvText.setText(value);        return inflate;

    }}

效果:

时间: 2024-10-27 10:24:16

安卓Design包之TabLayout控件的使用的相关文章

安卓Design包之TabLayout控件的简单使用

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用方法很简单,只需要添加一句依赖 compile 'com.android

安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLayout. 当然还有SnackBar,不过他在实际运用中一般都是和CoordinatorLayout搭配使用的. 先说下SnackBar,这个控件其实我觉得和Toast没什么差别,不过功能上的确有增强.这个控件可以通过setAction方法设置类似按钮一样的东西.而且这个东西可以设置多个. 重点还是

安卓Design包之Toolbar控件的使用

转自:ToolBar的使用 ToolBar的出现是为了替换之前的ActionBar的各种不灵活使用方式,相反,ToolBar的使用变得非常灵活,因为它可以让我们自由往里面添加子控件.低版本要使用的话,可以添加support-v7包. * toolabr使用:替代actionBar* 可以自定义布局* 点击事件和加载菜单可以当做view来使用* 位置可以任意* 需要在清单文件中去掉actionBar* toolbar可以当做viewGroup使用xml文件: <?xml version="1

安卓Design包之CollapsingToolbarLayout(可折叠的工具栏布局)的简单使用

转自: CollapsingToolbarLayout的使用 注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(

【安卓】给gallery内&quot;控件&quot;挂载事件,滑动后抬起手指时也触发事件(滑动时不应触发)的解决、!

思路: 1.gallery内控件挂载事件(如:onClickListener)的方法类似listview,可直接在baseAdapter.getView内给控件挂载(具体方法百度). 2.貌似没问题,但滑动后(手指在挂载了事件的控件上)抬起手指时仍会触发事件,这是不对的. 解决方法时,若为滑动(x有偏移),则在gallery.onInterceptTouchEvent中拦截事件,子控件自然接受不到事件. 注:1>不能简单的判断x有偏移就拦截,有些设备犯贱,即使原地抬起也有可能有偏移,此时本应触发

安卓Design包之NavigationView结合DrawerLayout,toolbar的使用,FloatingActionButton

FloatingActionButton 悬浮按钮:FloatingActionButton是重写ImageView的,所有FloatingActionButton拥有ImageView的一切属性. app:backgroundTint - 设置FAB的背景颜色. app:rippleColor - 设置FAB点击时的背景颜色. app:borderWidth - 该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果.所以设置为bor

Appium基于安卓的各种FindElement的控件定位方法实践和建议

AppiumDriver的各种findElement方法的尝试,尝试的目标应用是SDK自带的Notepad应用. 1. findElementByName 1.1 示例 el = driver.findElementByName("Add note"); assertThat(el.getText(),equalTo("Add note")); 1.2 如何获得Name 安卓设备没有找到适合的方法,尝试用Appium Inspector,但是使用了当前最新的&quo

Appium基于安卓的各种FindElement的控件定位

转自:http://www.2cto.com/kf/201410/340345.html 1. findElementByName 1.1 示例 ? 1 2 el = driver.findElementByName("Add note"); assertThat(el.getText(),equalTo("Add note")); 1.2 如何获得Name 安卓设备没有找到适合的方法,尝试用Appium Inspector,但是使用了当前最新的“AppiumFor

android开发游记:meterial design 5.0 开源控件整套合集 及使用demo

android 的5.0发布不光google官方给出了一些新控件,同时还给出了一套符合material design风格的设计标准,这套标准将未来将覆盖google所有产品包括pc端,网站,移动端.在android端上陆续出现了许多开源的控件库开始以google的以 material design为指导而设计的新风格控件库,对比了多个库之后这里推荐一套比较齐全且效果比较好的控件库,使用方法和传统控件高度一致,并向下兼容,附上使用方式和demo下载. 效果图: 这是由rey5137发布的mater