安卓Design包之TabLayout控制項的使用

來源:互聯網
上載者:User

標籤:

轉自:

安卓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>
View Code

 

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>
View Code

 

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;

}
}

效果:

 

安卓Design包之TabLayout控制項的使用

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.