我需要从不同的来源收集信息,才能组合出一个可用的TabLayout。下面是一个完整的使用案例,可以根据需要进行修改。
请确保模块的build.gradle
文件中包含对com.android.support:design
的依赖。
dependencies {
compile 'com.android.support:design:23.1.1'
}
在我的情况下,我正在应用程序中创建一个带有TabLayout的关于(About)活动。 我将以下部分添加到
AndroidMainifest.xml
中。 设置parentActivityName允许主页箭头将用户带回到主活动。
<activity
android:name=".AboutActivity"
android:label="@string/about_app"
android:theme="@style/MyApp.About"
android:parentActivityName=".MainActivity"
android:configChanges="orientation|screenSize" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity" />
</activity>
styles.xml
包含以下条目。该应用程序在主活动中具有白色的AppBar,在关于活动中具有蓝色的AppBar。我们需要为关于活动设置colorPrimaryDark
,以便AppBar上方的状态栏变为蓝色。
<style name="MyApp" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">@color/blue</item>
</style>
<style name="MyApp.About" />
<style name="MyApp.DarkAppBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="MyApp.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
<style name="MyApp.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
还有一个styles.xml (v19)
文件。它位于src/main/res/values-v19/styles.xml
。只有当设备的API>= 19时,才会应用此文件。
<!
When it is specified the root layout should include android:fitsSystemWindows="true".
colorPrimaryDark goes behind the status bar, which is then darkened by the overlay.
<style name="MyApp.About">
<item name="android:windowTranslucentStatus">true</item>
<item name="colorPrimaryDark">@color/blue</item>
</style>
AboutActivity.java
包含以下代码。在我的情况下,我有固定数量的标签(7),因此我可以删除所有处理动态标签的代码。
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
public class AboutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.about_coordinatorlayout);
Toolbar supportAppBar = (Toolbar) findViewById(R.id.about_toolbar);
setSupportActionBar(supportAppBar);
final ActionBar appBar = getSupportActionBar();
assert appBar != null;
appBar.setDisplayHomeAsUpEnabled(true);
ViewPager aboutViewPager = (ViewPager) findViewById(R.id.about_viewpager);
assert aboutViewPager != null;
aboutViewPager.setAdapter(new aboutPagerAdapter(getSupportFragmentManager()));
TabLayout aboutTabLayout = (TabLayout) findViewById(R.id.about_tablayout);
assert aboutTabLayout != null;
aboutTabLayout.setupWithViewPager(aboutViewPager);
}
public class aboutPagerAdapter extends FragmentPagerAdapter {
public aboutPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return 7;
}
@Override
public CharSequence getPageTitle(int tab) {
switch (tab) {
case 0:
return getString(R.string.version);
case 1:
return getString(R.string.permissions);
case 2:
return getString(R.string.privacy_policy);
case 3:
return getString(R.string.changelog);
case 4:
return getString(R.string.license);
case 5:
return getString(R.string.contributors);
case 6:
return getString(R.string.links);
default:
return "";
}
}
@Override
public Fragment getItem(int tab) {
return AboutTabFragment.createTab(tab);
}
}
}
AboutTabFragment.java
用于填充每个标签页。在我的情况下,第一个标签页有一个ScrollView
内部的LinearLayout
,而其他所有标签页都有一个WebView
作为根布局。
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.widget.TextView;
public class AboutTabFragment extends Fragment {
private int tabNumber;
public static AboutTabFragment createTab(int tab) {
Bundle thisTabArguments = new Bundle();
thisTabArguments.putInt("Tab", tab);
AboutTabFragment thisTab = new AboutTabFragment();
thisTab.setArguments(thisTabArguments);
return thisTab;
}
@Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tabNumber = getArguments().getInt("Tab");
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View tabLayout;
if (tabNumber == 0) {
tabLayout = inflater.inflate(R.layout.about_tab_version, container, false);
} else {
tabLayout = inflater.inflate(R.layout.about_tab_webview, container, false);
WebView tabWebView = (WebView) tabLayout;
switch (tabNumber) {
case 1:
tabWebView.loadUrl("file:///android_asset/about_permissions.html");
break;
case 2:
tabWebView.loadUrl("file:///android_asset/about_privacy_policy.html");
break;
case 3:
tabWebView.loadUrl("file:///android_asset/about_changelog.html");
break;
case 4:
tabWebView.loadUrl("file:///android_asset/about_license.html");
break;
case 5:
tabWebView.loadUrl("file:///android_asset/about_contributors.html");
break;
case 6:
tabWebView.loadUrl("file:///android_asset/about_links.html");
break;
default:
break;
}
}
return tabLayout;
}
}
about_coordinatorlayout.xml
的内容如下:
<android.support.design.widget.CoordinatorLayout
android:id="@+id/about_coordinatorlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:id="@+id/about_appbarlayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@color/blue"
android:theme="@style/MyApp.AppBarOverlay" >
<android.support.v7.widget.Toolbar
android:id="@+id/about_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:theme="@style/MyApp.DarkAppBar"
app:popupTheme="@style/MyApp.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/about_tablayout"
xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android.support.design:tabBackground="@color/blue"
android.support.design:tabTextColor="@color/light_blue"
android.support.design:tabSelectedTextColor="@color/white"
android.support.design:tabIndicatorColor="@color/white"
android.support.design:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/about_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
about_tab_version.xml
的内容如下:
<ScrollView
android:id="@+id/about_version_scrollview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent" >
<LinearLayout
android:id="@+id/about_version_linearlayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="16dp" >
</LinearLayout>
</ScrollView>
关于 about_tab_webview.xml
:
<WebView
android:id="@+id/about_tab_webview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" />
在strings.xml
中也有条目。
<string name="about_app">About App</string>
<string name="version">Version</string>
<string name="permissions">Permissions</string>
<string name="privacy_policy">Privacy Policy</string>
<string name="changelog">Changelog</string>
<string name="license">License</string>
<string name="contributors">Contributors</string>
<string name="links">Links</string>
还有 colors.xml
<color name="blue">
<color name="light_blue">
<color name="white">
src/main/assets
包含在 AboutTabFragment.java
中引用的 HTML 文件。