欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法匯總

 更新時(shí)間:2016年09月26日 11:39:32   作者:sky-mxc  
這篇文章主要介紹了Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法,下面小編把每種方法通過實(shí)例逐一給大家介紹,需要的朋友可以參考下

 實(shí)現(xiàn)方式

實(shí)現(xiàn)的方式有很多種 這里總結(jié)最常見的幾種方式,以后再添加其他的。

viewPager + RadioGroup

viewPager + FragmentTabHost

viewpager +TabLayout

viewPager+RadioGroup

感覺這是最簡單的一個(gè)了,我也就不貼代碼 說說我理解的思路吧

通過給pager 和RadioGroup 添加監(jiān)聽,監(jiān)聽兩個(gè)控件的變化 實(shí)現(xiàn)聯(lián)動(dòng)

當(dāng)viewPager的顯示pager改變就會(huì)觸發(fā)監(jiān)聽 ,在監(jiān)聽中選中對(duì)應(yīng)的RadioButton即可

當(dāng)RadioGroup發(fā)生 選中改變時(shí)也會(huì)觸發(fā)監(jiān)聽 ,在選中改變后 設(shè)置顯示對(duì)應(yīng)的pager即可

FragmentTabHost +viewpager

這個(gè)方式 跟上面那個(gè)方式差不多 都是通過 監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)

如果只使用FragmentTabHost 只能實(shí)現(xiàn) 點(diǎn)擊tab切換 頁面的效果 不能實(shí)現(xiàn)左右滑動(dòng) 而 結(jié)合viewPager 剛好實(shí)現(xiàn)這一效果

先來看看FragmentTabHost經(jīng)常用的方法

- setup() 在使用addTab之前調(diào)用 設(shè)置必要的數(shù)據(jù) 如 FragmentManager,Fragment的容器id 
- addTab() 添加標(biāo)簽 
- newTabSpec() 新建 tab 
- setCurrentTab() 設(shè)置當(dāng)前顯示的標(biāo)簽 
- setOnChangeTabListtener 設(shè)置tab選中改變監(jiān)聽 
- tabHost.getTabWidget().setDividerDrawable(null); //去除間隔線 
- Tab的常用方法: 
- setIndicator() 可以設(shè)置view 和 字符串
main布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_tab_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.skymxc.demo.fragment.TabPagerActivity">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
<android.support.v4.app.FragmentTabHost
android:id="@+id/tab_host"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v4.app.FragmentTabHost>
</LinearLayout>

Framgent 簡單起見 就不寫布局文件了 其他的Fragment 跟這個(gè)類似

public class DiscoverFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText("發(fā)現(xiàn)");
textView.setGravity(Gravity.CENTER);
return textView;
}
}

tab 的布局 圖片在上 文本在下 比較簡單

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/selector_font"
android:text="發(fā)現(xiàn)"
android:layout_gravity="center"/>
</LinearLayout>

selector 基本類似 這里貼一個(gè)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@mipmap/cb_icon_discover_selected"/>
<item android:drawable="@mipmap/cb_icon_discover_normal"/>
</selector>

java 代碼

初始化 TabHost

private void initTabHost() {
tabHost.setup(this,getSupportFragmentManager(), R.id.pager);
tabHost.getTabWidget().setDividerDrawable(null);
tabHost.addTab(tabHost.newTabSpec("discover").setIndicator(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")), DiscoverFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"關(guān)注")), AttachFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("message").setIndicator(createView(R.drawable.selector_bg_message,"消息")), MsgFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("info").setIndicator(createView(R.drawable.selector_bg_info,"我的")), ContactFragment.class,null);
}

初始化 pager 并綁定適配器

/**
* 初始化 pager 綁定適配器
*/
private void initPager() {
fragments = new ArrayList<>();
fragments.add(new DiscoverFragment());
fragments.add(new AttachFragment());
fragments.add(new MsgFragment());
fragments.add(new ContactFragment());
FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);
}

分別給 TabHost 和pager 添加監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)

/**
* 為TabHost和viewPager 添加監(jiān)聽 讓其聯(lián)動(dòng)
*/
private void bindTabAndPager() {
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
/**
* tab改變后
* @param tabId 當(dāng)前tab的tag
*/
@Override
public void onTabChanged(String tabId) {
log("vonTabChanged:"+tabId);
int position = tabHost.getCurrentTab();
pager.setCurrentItem(position,true);
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
* 頁面滑動(dòng) 觸發(fā)
* @param position 當(dāng)前顯得第一個(gè)頁面的索引,當(dāng)滑動(dòng)出現(xiàn)時(shí)屏幕就會(huì)顯示兩個(gè)pager, 向右滑 position為當(dāng)前-1(左邊的pager就顯示出來了),向左滑position為當(dāng)前(右面就顯出來了),
* @param positionOffset 0-1之間 position的偏移量 從原始位置的偏移量
* @param positionOffsetPixels 從position偏移的像素值 從原始位置的便宜像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);
}
/**
* 頁面選中后
* @param position 當(dāng)前頁面的index
*/
@Override
public void onPageSelected(int position) {
tabHost.setCurrentTab(position);
log("onPageSelected==========:position:"+position);
}
/**
* 頁面滑動(dòng)狀態(tài)改變時(shí)觸發(fā)
* @param state 當(dāng)前滑動(dòng)狀態(tài) 共三個(gè)狀態(tài)值
*/
@Override
public void onPageScrollStateChanged(int state) {
String stateStr="";
switch (state){
case ViewPager.SCROLL_STATE_DRAGGING:
stateStr="正在拖動(dòng)";
break;
case ViewPager.SCROLL_STATE_SETTLING:
stateStr="正在去往最終位置 即將到達(dá)最終位置";
break;
case ViewPager.SCROLL_STATE_IDLE:
stateStr="滑動(dòng)停止,當(dāng)前頁面充滿屏幕";
break;
}
log("onPageScrollStateChanged========stateCode:"+state+"====state:"+stateStr);
}
});
}

完整代碼

public class TabPagerActivity extends AppCompatActivity {
private static final String TAG ="TabPagerActivity";
private FragmentTabHost tabHost;
private ViewPager pager;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_pager);
tabHost = (FragmentTabHost) findViewById(R.id.tab_host);
pager = (ViewPager) findViewById(R.id.pager);
//初始化TabHost
initTabHost();
//初始化pager
initPager();
//添加監(jiān)聽關(guān)聯(lián)TabHost和viewPager
bindTabAndPager();
}
/**
* 為TabHost和viewPager 添加監(jiān)聽 讓其聯(lián)動(dòng)
*/
private void bindTabAndPager() {
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
/**
* tab改變后
* @param tabId 當(dāng)前tab的tag
*/
@Override
public void onTabChanged(String tabId) {
log("vonTabChanged:"+tabId);
int position = tabHost.getCurrentTab();
pager.setCurrentItem(position,true);
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
* 頁面滑動(dòng) 觸發(fā)
* @param position 當(dāng)前顯得第一個(gè)頁面的索引,當(dāng)滑動(dòng)出現(xiàn)時(shí)屏幕就會(huì)顯示兩個(gè)pager, 向右滑 position為當(dāng)前-1(左邊的pager就顯示出來了),向左滑position為當(dāng)前(右面就顯出來了),
* @param positionOffset 0-1之間 position的偏移量 從原始位置的偏移量
* @param positionOffsetPixels 從position偏移的像素值 從原始位置的便宜像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);
}
/**
* 頁面選中后
* @param position 當(dāng)前頁面的index
*/
@Override
public void onPageSelected(int position) {
tabHost.setCurrentTab(position);
log("onPageSelected==========:position:"+position);
}
/**
* 頁面滑動(dòng)狀態(tài)改變時(shí)觸發(fā)
* @param state 當(dāng)前滑動(dòng)狀態(tài) 共三個(gè)狀態(tài)值
*/
@Override
public void onPageScrollStateChanged(int state) {
String stateStr="";
switch (state){
case ViewPager.SCROLL_STATE_DRAGGING:
stateStr="正在拖動(dòng)";
break;
case ViewPager.SCROLL_STATE_SETTLING:
stateStr="正在去往最終位置 即將到達(dá)最終位置";
break;
case ViewPager.SCROLL_STATE_IDLE:
stateStr="滑動(dòng)停止,當(dāng)前頁面充滿屏幕";
break;
}
log("onPageScrollStateChanged========stateCode:"+state+"====state:"+stateStr);
}
});
}
/**
* 初始化 pager 綁定適配器
*/
private void initPager() {
fragments = new ArrayList<>();
fragments.add(new DiscoverFragment());
fragments.add(new AttachFragment());
fragments.add(new MsgFragment());
fragments.add(new ContactFragment());
FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);
}
/**
* 初始化 TabHost
*/
private void initTabHost() {
tabHost.setup(this,getSupportFragmentManager(), R.id.pager);
tabHost.getTabWidget().setDividerDrawable(null);
tabHost.addTab(tabHost.newTabSpec("discover").setIndicator(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")), DiscoverFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"關(guān)注")), AttachFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("message").setIndicator(createView(R.drawable.selector_bg_message,"消息")), MsgFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("info").setIndicator(createView(R.drawable.selector_bg_info,"我的")), ContactFragment.class,null);
}
/**
* 返回view
* @param icon
* @param tab
* @return
*/
private View createView(int icon,String tab){
View view = getLayoutInflater().inflate(R.layout.fragment_tab_discover,null);
ImageView imageView = (ImageView) view.findViewById(R.id.icon);
TextView title = (TextView) view.findViewById(R.id.title);
imageView.setImageResource(icon);
title.setText(tab);
return view;
}
private void log(String log){
Log.e(TAG,"="+log+"=");
}
}

效果如下:

這里寫圖片描述

viewpager +TabLayout

TabLayout 輸入 design的擴(kuò)展包 使用之前必須得先導(dǎo)入擴(kuò)展包

tabLayout 可以自動(dòng)去關(guān)聯(lián) viewPager 只需為tabLayout 指定關(guān)聯(lián)的viewPager就可以了

這樣是方便了很多,但是也有缺點(diǎn),在自動(dòng)關(guān)聯(lián)之后 tabLayout會(huì)自動(dòng)去讀取 viewPager的title,想使用自定的view當(dāng)做tab就不可能了

導(dǎo)入 design 擴(kuò)展包 并排在v7上面

這里寫圖片描述

布局 這里使用了兩個(gè)TabLayout 分別實(shí)現(xiàn) 自動(dòng)關(guān)聯(lián) 和 手動(dòng)關(guān)聯(lián)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.skymxc.demo.fragment.TabLayoutActivity">
<!-- 使用自動(dòng)關(guān)聯(lián)-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabSelectedTextColor="#f0f"
app:tabIndicatorColor="#f0f"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
<!--通過監(jiān)聽去關(guān)聯(lián)-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabSelectedTextColor="#ff0"
app:tabIndicatorColor="#ff0"></android.support.design.widget.TabLayout>
</LinearLayout>

初始化 自動(dòng)關(guān)聯(lián)的tab 并和viewPager綁定

private void initTabLayoutAndPager() {
//關(guān)聯(lián) viewPager 使用關(guān)聯(lián)后 tab就會(huì)自動(dòng)去獲取pager的title,使用addTab就會(huì)無效
tabLayout.setupWithViewPager(pager);
fragments = new ArrayList<>();
fragments.add(new DiscoverFragment());
fragments.add(new AttachFragment());
fragments.add(new MsgFragment());
fragments.add(new ContactFragment());
adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);
}

tab的布局和上面是一樣的。

為TabLayout 添加view 自動(dòng)關(guān)聯(lián)添加也沒用

tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"關(guān)注")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_message,"消息")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_info,"我的")));
tabLayoutMenu.setSelectedTabIndicatorHeight(0);//去除指示器

設(shè)置 viewPager的監(jiān)聽和 TabLayout的監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)

tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
/**
* 選中tab后觸發(fā)
* @param tab 選中的tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
//與pager 關(guān)聯(lián)
pager.setCurrentItem(tab.getPosition(),true);
}
/**
* 退出選中狀態(tài)時(shí)觸發(fā)
* @param tab 退出選中的tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
/**
* 重復(fù)選擇時(shí)觸發(fā)
* @param tab 被 選擇的tab
*/
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//關(guān)聯(lián) TabLayout
tabLayoutMenu.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});

完整代碼

package com.skymxc.demo.fragment;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.skymxc.demo.fragment.adapter.FragmentAdapter;
import com.skymxc.demo.fragment.fragment.AttachFragment;
import com.skymxc.demo.fragment.fragment.ContactFragment;
import com.skymxc.demo.fragment.fragment.DiscoverFragment;
import com.skymxc.demo.fragment.fragment.MsgFragment;
import java.util.ArrayList;
import java.util.List;
public class TabLayoutActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager pager;
private TabLayout tabLayoutMenu;
private FragmentAdapter adapter ;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
pager = (ViewPager) findViewById(R.id.container);
tabLayoutMenu = (TabLayout) findViewById(R.id.tab_layout_menu);
initTabLayoutAndPager();
//想使用自己的布局就得 通過 監(jiān)聽進(jìn)行關(guān)聯(lián)
bindPagerAndTab();
}
private void bindPagerAndTab() {
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"關(guān)注")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_message,"消息")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_info,"我的")));
tabLayoutMenu.setSelectedTabIndicatorHeight(0);//去除指示器
tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
/**
* 選中tab后觸發(fā)
* @param tab 選中的tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
//與pager 關(guān)聯(lián)
pager.setCurrentItem(tab.getPosition(),true);
}
/**
* 退出選中狀態(tài)時(shí)觸發(fā)
* @param tab 退出選中的tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
/**
* 重復(fù)選擇時(shí)觸發(fā)
* @param tab 被 選擇的tab
*/
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//關(guān)聯(lián) TabLayout
tabLayoutMenu.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initTabLayoutAndPager() {
//關(guān)聯(lián) viewPager 使用關(guān)聯(lián)后 tab就會(huì)自動(dòng)去獲取pager的title,使用addTab就會(huì)無效
tabLayout.setupWithViewPager(pager);
fragments = new ArrayList<>();
fragments.add(new DiscoverFragment());
fragments.add(new AttachFragment());
fragments.add(new MsgFragment());
fragments.add(new ContactFragment());
adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);
}
private View createView(int icon, String tab){
View view = getLayoutInflater().inflate(R.layout.fragment_tab_discover,null);
ImageView imageView = (ImageView) view.findViewById(R.id.icon);
TextView title = (TextView) view.findViewById(R.id.title);
imageView.setImageResource(icon);
title.setText(tab);
return view;
}
}

效果圖

這里寫圖片描述 

這里貼一下 viewPager的適配器

public class FragmentAdapter extends FragmentPagerAdapter {
List<Fragment> fragments ;
private String[] titles = new String[]{"發(fā)現(xiàn)","關(guān)注","消息","我的"};
public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) {
super(fm);
this.fragments =fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments ==null ?0:fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}

目前就總結(jié)了這幾種方式 想到別的方式 再總結(jié)

關(guān)于這個(gè) Demo的github :https://github.com/sky-mxc/AndroidDemo/tree/master/fragment

以上所示是小編給大家介紹的Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法匯總,希望對(duì)大家有所幫助!

相關(guān)文章

最新評(píng)論