AndroidAPP頂部導航欄Tab點選和左右滑動實現切換介面
阿新 • • 發佈:2019-01-24
APP市場中大多數資訊App都有導航選單,導航選單是一組標籤的集合,在新聞APP中,每個標籤標示一個類別,對應下面ViewPager控制元件的一個分頁面。
隨著版本迭代的更新,帶來了許多控制元件,案例主要用到了TabLayout,ViewPage,RecyclerView,CardView等新控制元件。
效果如圖:
以前的實現方法是 :ViewPagerIndicator + Fragment + ViewPager 相結合來實現
今天主要講的是另一種實現方式:TabLayout+ Fragment + ViewPager
新增程式所需要的依賴:
compile 'com.android.support:design:23.2.1' compile 'com.android.support:recyclerview-v7:23.1.1' compile 'com.android.support:cardview-v7:23.2.1'
主佈局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E0E0E0" app:tabIndicatorColor="@color/ind_red" app:tabMode="fixed" app:tabSelectedTextColor="@color/material_orange" app:tabTextColor="@android:color/black" app:tabIndicatorHeight="5dp" app:tabTextAppearance="@style/TabStyle" /> <android.support.v4.view.ViewPager android:id="@+id/tab_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E0E0E0" app:tabIndicatorColor="@color/ind_red" app:tabMode="fixed" app:tabSelectedTextColor="@color/material_orange" app:tabTextColor="@android:color/black" app:tabIndicatorHeight="5dp" app:tabTextAppearance="@style/TabStyle" /> <android.support.v4.view.ViewPager android:id="@+id/tab_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
Tablayout控制元件包含很多屬性 例如 tabIndicatorColor:選單下方移動的橫線的顏色 屬性很多就不一 一介紹了,程式碼中有註釋。
Activity.Java
public class TabLessActivity extends AppCompatActivity {
private TabLayout tabLayout = null;
private ViewPager viewPager;
private Fragment[] mFragmentArrays = new Fragment[5];
private String[] mTabTitles = new String[5];
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.tab_layout);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.tab_viewpager);
initView();
}
private void initView() {
mTabTitles[0] = "推薦";
mTabTitles[1] = "熱點";
mTabTitles[2] = "科技";
mTabTitles[3] = "體育";
mTabTitles[4] = "健康";
tabLayout.setTabMode(TabLayout.MODE_FIXED);
//設定tablayout距離上下左右的距離
//tab_title.setPadding(20,20,20,20);
mFragmentArrays[0] = TabFragment.newInstance();
mFragmentArrays[1] = TabFragment.newInstance();
mFragmentArrays[2] = TabFragment.newInstance();
mFragmentArrays[3] = TabFragment.newInstance();
mFragmentArrays[4] = TabFragment.newInstance();
PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
//將ViewPager和TabLayout繫結
tabLayout.setupWithViewPager(viewPager);
}
}
Fragment.java
public class TabFragment extends Fragment {
public static Fragment newInstance() {
TabFragment fragment = new TabFragment();
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recycler);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(new RecyclerAdapter());
return rootView;
}
}
技術在更新,我們在進步,TabLayout實現tab導航效果比以前那些方法來的更加簡單方便。