Android仿微信底部實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
在網(wǎng)上看了比較多的關(guān)于Tab的教程,發(fā)現(xiàn)都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個(gè)很大的缺陷,Tab里面的內(nèi)容剛進(jìn)去是沒有的,要滑一次才能加載出來。而且滑動(dòng)的時(shí)候,Tab里面的內(nèi)容位置不是固定的,滑倒最后會(huì)出現(xiàn)一片空白,非常不美觀。雖然有其他的補(bǔ)救方法,但是非常的麻煩,所以我就按照自己的方法實(shí)現(xiàn)了一個(gè),功能不錯(cuò)而且非常簡(jiǎn)單。
直接點(diǎn)擊或者是滑動(dòng)界面,都可以轉(zhuǎn)到相應(yīng)的頁面。
效果圖:
原理是用了三個(gè)按鈕和ViewPaper,拋棄了TitlePagerTabStrip。
ViewPaper通俗的說,它是一個(gè)裝頁面的容器。如上圖我有三個(gè)不同的界面,是因?yàn)槲野讶齻€(gè)view加了進(jìn)去。然后再把這個(gè)viewPaper加到主界面的布局中。
這樣,主界面上就有三個(gè)按鈕,按鈕下方是一個(gè)viewPaper,這個(gè)viewPaper里面有三個(gè)view,我每滑一下或點(diǎn)擊按鈕就會(huì)跳到相應(yīng)的view。
就是說我們看到的,其實(shí)都是主界面,按鈕是一直在那的。我們只是不斷的轉(zhuǎn)換viewPaper這個(gè)容器里面的視圖而已。
主界面的布局代碼:
<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" tools:context=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" > </RelativeLayout>
怎么實(shí)現(xiàn),按相應(yīng)的按鈕跳轉(zhuǎn)到viewPaper中相應(yīng)的視圖呢?很簡(jiǎn)單,只要為按鈕設(shè)置監(jiān)聽,然后調(diào)用viewPaper的setCurrentItem()這個(gè)函數(shù)就行。
對(duì)于相應(yīng)的頁面,我們的按鈕也應(yīng)該有相應(yīng)的變化,如上圖我們的按鈕中的英文變成了√。這個(gè)只要在viewPaper的監(jiān)聽器中重載onPageSelected()這個(gè)函數(shù)就行,
每個(gè)頁面被選中,都會(huì)調(diào)用這個(gè)函數(shù)。在這個(gè)函數(shù)里判斷當(dāng)前的頁面是哪一個(gè),然后再對(duì)按鈕做出相應(yīng)的改變即可。
onCreate的代碼
//設(shè)置viewPaper ViewPager pager = null; ArrayList<View> viewContainter = new ArrayList<View>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_add); //實(shí)例化ViewPaper pager = (ViewPager) this.findViewById(R.id.viewpager3); //設(shè)置按鈕跳轉(zhuǎn)到相應(yīng)的viewPaper頁面 按鈕1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //跳到第一個(gè)頁面 pager.setCurrentItem(0); } }); 按鈕2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //第二個(gè)頁面 pager.setCurrentItem(1); } }); 按鈕3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //第三個(gè)頁面 pager.setCurrentItem(2); } }); //為viewPaper設(shè)置內(nèi)容 //view是我們放進(jìn)viewPaper里面的東西,要為它設(shè)置好布局,再放進(jìn)去 View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null); View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null); View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null); //這是個(gè)ArrayList,加進(jìn)去了3個(gè)view viewContainter.add(view1); viewContainter.add(view2); viewContainter.add(view3); //設(shè)置適配器 這里的代碼復(fù)制即可 pager.setAdapter(new PagerAdapter() { //viewpager中的組件數(shù)量 @Override public int getCount() { return viewContainter.size(); } //滑動(dòng)切換的時(shí)候銷毀當(dāng)前的組件 @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewContainter.get(position)); } //每次滑動(dòng)的時(shí)候生成的組件 @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); return viewContainter.get(position); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } }); //頁面變化時(shí)的監(jiān)聽 改變按鈕 pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { switch (i) { //如果是第一個(gè)頁面 case 0: 按鈕1.setText("√"); 按鈕2.setText("TAB2"); 按鈕3.setText("TAB3"); break; //如果是第二個(gè)頁面 case 1: 按鈕1.setText("TAB1"); 按鈕2.setText("√"); 按鈕3.setText("TAB3"); break; //如果是第三個(gè)頁面 case 1: 按鈕1.setText("TAB1"); 按鈕2.setText("TAB2"); 按鈕3.setText("√"); break; } } @Override public void onPageScrollStateChanged(int i) { } }); }
想用到每個(gè)view里面的控件的話,在主界面上是找不到這些控件的,都是空的。 必須在instantiateItem這個(gè)函數(shù)里面指定。
@Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); switch (position){ case 0: { //在第一個(gè)頁面中 } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- Android TabHost如何實(shí)現(xiàn)頂部選項(xiàng)卡
- Android開發(fā)之TabHost選項(xiàng)卡及相關(guān)疑難解決方法
- Android TabHost選項(xiàng)卡標(biāo)簽圖標(biāo)始終不出現(xiàn)的解決方法
- Android組件TabHost實(shí)現(xiàn)頁面中多個(gè)選項(xiàng)卡切換效果
- android TabHost(選項(xiàng)卡)的使用方法
- android 選項(xiàng)卡(TabHost)如何放置在屏幕的底部
- Android TabLayout(選項(xiàng)卡布局)簡(jiǎn)單用法實(shí)例分析
- Android多個(gè)TAB選項(xiàng)卡切換效果
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能(選項(xiàng)卡)
- android選項(xiàng)卡TabHost功能用法詳解
相關(guān)文章
Android Studio Gradle插件版本與Gradle版本之間的對(duì)應(yīng)關(guān)系
今天小編就為大家分享一篇關(guān)于Android Studio Gradle插件版本與Gradle版本之間的對(duì)應(yīng)關(guān)系,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12Android自定義View實(shí)現(xiàn)動(dòng)畫效果詳解
這篇文章主要為大家詳細(xì)介紹了Android如何通過自定義View實(shí)現(xiàn)動(dòng)畫效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02Android應(yīng)用中設(shè)置alpha值來制作透明與漸變效果的實(shí)例
這篇文章主要介紹了Android應(yīng)用中設(shè)置alpha值來制作透明與漸變效果的實(shí)例,展示了基礎(chǔ)的透明漸變動(dòng)畫的編寫方法,需要的朋友可以參考下2016-04-04React Native中Android物理back鍵按兩次返回鍵即退出應(yīng)用
這篇文章主要給大家介紹了關(guān)于React Native中Android物理back鍵按兩次返回鍵即退出應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10Android AndBase框架使用封裝好的函數(shù)完成Http請(qǐng)求(三)
這篇文章主要介紹了Android AndBase框架使用封裝好的函數(shù)完成Http請(qǐng)求的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-03-03Android自定義view繪制圓環(huán)占比動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Android自定義view繪制圓環(huán)占比動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01如何利用Kotlin實(shí)現(xiàn)極簡(jiǎn)回調(diào)
這篇文章主要給大家介紹了關(guān)于如何利用Kotlin實(shí)現(xiàn)極簡(jiǎn)回調(diào)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01