PagerSlidingTabStrip制作Android帶標(biāo)簽的多界面滑動(dòng)切換
這里我們用到了兩個(gè)庫(kù),一個(gè)是Android SDK里自帶的android-support-v4,另一個(gè)是PagerSlidingTabStrip,開(kāi)源項(xiàng)目地址是https://github.com/astuetz/PagerSlidingTabStrip
用v4是需要用到他的ViewPager以及Fragment,而PagerSlidingTabStrip就是應(yīng)用上邊的標(biāo)簽。
成果預(yù)覽:

下面,開(kāi)工~
布局
創(chuàng)建Activity什么的就不說(shuō)了,喜歡ActionBar就創(chuàng)建一個(gè)ActionBarActivity,需要v7 support包。
這里直接給出此Activity的布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabstrip"
android:layout_height="48dp"
android:layout_width="match_parent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:overScrollMode="never"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="@id/tabstrip" />
</RelativeLayout>
com.astuetz.PagerSlidingTabStrip這貨就是界面上方那幾個(gè)標(biāo)簽。這里我指定了高度為48dp,這個(gè)高度也是Android Design里強(qiáng)烈建議的可反饋區(qū)域的高度。
之前有同事在合作開(kāi)發(fā)App的時(shí)候看到他使用RadioGroup做這幾個(gè)標(biāo)簽,又要再加一個(gè)View來(lái)做下邊的能活動(dòng)的Indicator,容易出錯(cuò)不說(shuō),代碼復(fù)雜度絕對(duì)比我下邊要貼出的高很多了。并非是我懶,不愿意自己去實(shí)現(xiàn),而是我覺(jué)得世上已經(jīng)有了那么多別人已經(jīng)好心好意幫你做完了等你來(lái)用的美好的東西,非要自己扭自己搞一套的話(huà),未免有些得不償失。人人都想牛逼,都想做出些比別人更牛逼的東西,但是我認(rèn)為,如果能把現(xiàn)有的一些好東西完美的結(jié)合到一起就已經(jīng)很不易了。
說(shuō)了一些無(wú)關(guān)的觀(guān)點(diǎn),回到正題。很簡(jiǎn)單的上下結(jié)構(gòu)布局,不用多說(shuō)。至于ViewPager中android:overScrollMode="never"是一個(gè)小tip,我是不太喜歡ViewPager的越界效果的(fadingEdge="none"并不能生效),這個(gè)layout parameter可以使ViewPager的越界效果失效。
代碼
眾所周知,ViewPager中的成員必須是Fragment,所以在配置ViewPager以及PagerSlidingTabStrip之前需要先創(chuàng)建一個(gè)簡(jiǎn)單的Fragment做ViewPager中的顯示。
package com.airk.myapplication.viewdemo.app.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.airk.myapplication.simplechat.app.widget.MyTextView; //我自定義的TextView,只是修改了默認(rèn)字體,最近覺(jué)得Roboto-Light/Thin特別好看
/**
* Simple Fragment which only has one TextView
*/
public class NumberFragment extends Fragment {
private String content; //Fragment中顯示的內(nèi)容
public static NumberFragment newInstance(String content) { //對(duì)外提供創(chuàng)建實(shí)例的方法,你給我需要顯示的內(nèi)容,我給你Fragment實(shí)例
return new NumberFragment(content);
}
private NumberFragment(String content) {
this.content = content;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
MyTextView tv = new MyTextView(getActivity());
tv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
tv.setGravity(Gravity.CENTER);
tv.setTextSize(26.0f);
tv.setText(this.content);
return tv; //只有一個(gè)全屏顯示、居中的Roboto字體的TextView
}
}
Fragment創(chuàng)建完了,注釋都寫(xiě)到了代碼里邊,淺顯易懂,非常簡(jiǎn)單。下邊是Activity的代碼:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_activity);
getSupportActionBar().setDisplayShowHomeEnabled(false); //ActionBar不顯示應(yīng)用Icon
ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager); //獲取ViewPager
viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //簡(jiǎn)單創(chuàng)建一個(gè)FragmentPagerAdapter
@Override
public CharSequence getPageTitle(int position) { //必須復(fù)寫(xiě)這個(gè)方法,開(kāi)源控件PagerSlidingTabStrip需要通過(guò)它獲取標(biāo)簽標(biāo)題
return "Title " + (position + 1);
}
@Override
public Fragment getItem(int i) {
return NumberFragment.newInstance("Content " + (i + 1)); //返回剛剛我們創(chuàng)建的那個(gè)Fragment,顯示內(nèi)容為Content X
}
@Override
public int getCount() {
return 3; //測(cè)試只用3個(gè)標(biāo)簽
}
});
PagerSlidingTabStrip strip = (PagerSlidingTabStrip) findViewById(R.id.tabstrip); //獲取PagerSlidingTabStrip控件對(duì)象
strip.setShouldExpand(true); //設(shè)置標(biāo)簽自動(dòng)擴(kuò)展——當(dāng)標(biāo)簽們的總寬度不夠屏幕寬度時(shí),自動(dòng)擴(kuò)展使每個(gè)標(biāo)簽寬度遞增匹配屏幕寬度,注意!這一條代碼必須在setViewPager前方可生效
strip.setViewPager(viewpager); //這是其所handle的ViewPager
strip.setDividerColor(Color.TRANSPARENT); //設(shè)置每個(gè)標(biāo)簽之間的間隔線(xiàn)顏色 ->透明
strip.setUnderlineHeight(3); //設(shè)置標(biāo)簽欄下邊的間隔線(xiàn)高度,單位像素
strip.setIndicatorHeight(6); //設(shè)置Indicator 游標(biāo) 高度,單位像素
}
PagerSlidingTabStrip這個(gè)控件有很多可自定義屬性,包括每個(gè)標(biāo)簽的顏色,字符顏色,間隔的Drawable等等。如果大家有需求可以去仔細(xì)看看其github主頁(yè)以及官方給出的sample學(xué)習(xí)一下。
總結(jié)
結(jié)合開(kāi)源控件PagerSlidingTabStrip我們很方便的就做到了帶標(biāo)簽可滑動(dòng)的多個(gè)界面開(kāi)發(fā),從代碼量上看說(shuō)實(shí)話(huà)已經(jīng)很少了,而且邏輯上也淺顯易懂,甚至都沒(méi)有注冊(cè)什么Listener就已經(jīng)實(shí)現(xiàn)了標(biāo)簽與每個(gè)界面的互動(dòng)(點(diǎn)擊標(biāo)簽切換界面 or 滑動(dòng)界面切換標(biāo)簽),而且Indicator游標(biāo)也已經(jīng)被設(shè)計(jì)成了隨用戶(hù)滑動(dòng)而滑動(dòng)的,節(jié)省了很多開(kāi)發(fā)時(shí)間。
- Android使用ViewPager實(shí)現(xiàn)頂部tabbar切換界面
- Android實(shí)現(xiàn)界面左右滑動(dòng)切換功能
- Android輸入法與表情面板切換時(shí)的界面抖動(dòng)問(wèn)題解決方法
- Android實(shí)現(xiàn)閃屏及注冊(cè)和登錄界面之間的切換效果
- Android App仿微信界面切換時(shí)Tab圖標(biāo)變色效果的制作方法
- Android應(yīng)用中使用ViewPager實(shí)現(xiàn)類(lèi)似QQ的界面切換效果
- android編程實(shí)現(xiàn)局部界面動(dòng)態(tài)切換的方法
- Android界面切換出現(xiàn)短暫黑屏的解決方法
- Android實(shí)現(xiàn)Activity界面切換添加動(dòng)畫(huà)特效的方法
- Android studio實(shí)現(xiàn)兩個(gè)界面間的切換
相關(guān)文章
android監(jiān)聽(tīng)View加載完成的示例講解
今天小編就為大家分享一篇android監(jiān)聽(tīng)View加載完成的示例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Android基于訊飛語(yǔ)音SDK實(shí)現(xiàn)語(yǔ)音識(shí)別
本例子是一個(gè)調(diào)用訊飛語(yǔ)音識(shí)別SDK的例子源碼是一個(gè)最純凈的Demo比較容易看懂。實(shí)現(xiàn)的是點(diǎn)擊按鈕開(kāi)始語(yǔ)音監(jiān)聽(tīng),手機(jī)需要聯(lián)網(wǎng),2/3G的均可,希望本文對(duì)大家學(xué)習(xí)Android有所幫助2016-06-06
Android編程實(shí)現(xiàn)短信收發(fā)及語(yǔ)音播報(bào)提示功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)短信收發(fā)及語(yǔ)音播報(bào)提示功能,結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)短信的接收、發(fā)送以及相應(yīng)的語(yǔ)音播報(bào)提示功能相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
Android Retrofit 2.0框架上傳圖片解決方案
這篇文章主要介紹了Android Retrofit 2.0框架上傳一張與多張圖片解決方案,感興趣的小伙伴們可以參考一下2016-03-03
Mac 下 Android Studio 不打印日志的解決辦法
這篇文章主要介紹了Mac 下 Android Studio 不打印日志的解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
Android數(shù)據(jù)緩存框架內(nèi)置ORM功能使用教程
這篇文章主要為大家介紹了Android數(shù)據(jù)緩存框架內(nèi)置ORM功能使用教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
Android開(kāi)發(fā)之毛玻璃效果實(shí)例代碼
這篇文章主要給大家分享android開(kāi)發(fā)之毛玻璃效果的實(shí)例代碼,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05
Android控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要介紹了Android基礎(chǔ)控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果的相關(guān)資料,本文是以查看物流信息為例,給大家介紹了listview時(shí)間軸的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-11-11
Android實(shí)現(xiàn)動(dòng)態(tài)改變app圖標(biāo)的示例代碼
本篇文章主要介紹了Android實(shí)現(xiàn)動(dòng)態(tài)改變app圖標(biāo)的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09
淺談Android ASM自動(dòng)埋點(diǎn)方案實(shí)踐
本篇文章主要介紹了淺談Android ASM自動(dòng)埋點(diǎn)方案實(shí)踐,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01

