國內(nèi)大部分應(yīng)用使用底部導(dǎo)航欄，
底部導(dǎo)航欄 是國內(nèi) APP 常見的導(dǎo)航方式， 歷經(jīng)： TabActivity -> ActionBar -> TabHost -> FragmentTabHost -> TabLayout 等等方式。
安卓官方文檔 https://developer.android.google.cn/develop/index.html
TabLayout 是安卓輔助設(shè)計類庫的一部分，設(shè)計類庫的用法可以參考泡在網(wǎng)上的日子。
TabLayout 用法：
使用代碼添加 Item
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));-
使用布局文件添加 Item
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"><android.support.design.widget.TabItem android:text="@string/tab_text"/> <android.support.design.widget.TabItem android:icon="@drawable/ic_android"/> </android.support.design.widget.TabLayout>
制作底部導(dǎo)航欄
The bottom navigation bar on mobile
TabActivity 代碼：
public class TabActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
}
}
activity_tab 代碼：
<?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">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_blue_bright" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@android:color/white"
app:tabIndicatorColor="@android:color/transparent">
<android.support.design.widget.TabItem android:layout="@layout/tab_item" />
<android.support.design.widget.TabItem android:layout="@layout/tab_item" />
<android.support.design.widget.TabItem android:layout="@layout/tab_item" />
<android.support.design.widget.TabItem android:layout="@layout/tab_item" />
</android.support.design.widget.TabLayout>
</LinearLayout>
tab_item 代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:contentDescription="@string/app_name"
android:scaleType="fitXY"
android:src="@drawable/selector_tab_image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/android"
android:textColor="@color/selector_tab_text" />
</LinearLayout>
圖片選擇器 selector_tab_image 代碼：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/ic_launcher_0" android:state_selected="true" />
<item android:drawable="@mipmap/ic_launcher_1" android:state_selected="false" />
</selector>
文字選擇器 selector_tab_text 代碼：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#F00" android:state_selected="true" />
<item android:color="#0FF" android:state_selected="false" />
</selector>
使用 Java 代碼添加 Item：
public class TabActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_item));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_item));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_item));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_item));
}
}
循環(huán)添加
public class TabActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
String[] texts = {"安卓", "Android", "Java", "Kotlin"};
for (String s:texts) {
View itemView = LayoutInflater.from(this).inflate(R.layout.tab_item, tabLayout, false);
TextView txtView = (TextView) itemView.findViewById(R.id.tv_tab_text);
txtView.setText(s);
tabLayout.addTab(tabLayout.newTab().setCustomView(itemView));
}
}
}
...
-
app:tabIndicatorColor="@android:color/transparent"隱藏TabLayout指示器； -
app:tabBackground="@android:color/white"取消導(dǎo)航欄被點擊時的陰影效果。
記錄下FragmentTabHost布局：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_f8f8f8">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="49dp"
android:layout_marginTop="1dp"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
