Android 개발 의 위 챗 하단 메뉴 표시 줄 에서 이 루어 진 몇 가지 방법 을 모 았 습 니 다.

실현 방식
실현 하 는 방식 은 여러 가지 가 있 는데 여기 서 가장 흔히 볼 수 있 는 몇 가지 방식 을 정리 한 다음 에 다른 것 을 추가 합 니 다.
viewPager + RadioGroup
viewPager + FragmentTabHost
viewpager +TabLayout
viewPager+RadioGroup
이것 이 가장 간단 한 것 같 습 니 다.저도 코드 를 붙 이지 않 고 제 가 이해 하 는 생각 을 말씀 드 리 겠 습 니 다.
pager 와 RadioGroup 에 감청 을 추가 하고 두 컨트롤 의 변 화 를 감청 하여 연동 합 니 다.
viewPager 의 디 스 플레이 pager 가 바 뀌 면 감청 이 실 행 됩 니 다.감청 중 에 해당 하 는 RadioButton 을 선택 하면 됩 니 다.
RadioGroup 이 선택 변경 되 었 을 때 도 감청 이 실 행 됩 니 다.선택 변경 후 해당 하 는 pager 를 설정 하면 됩 니 다.
FragmentTabHost +viewpager
이 방식 은 위 와 그 방식 의 차이 가 많 지 않 습 니 다.모두 감청 을 통 해 연동 되 어 있 습 니 다.
Fragment TabHost 만 사용 하면 tab 를 클릭 하여 페이지 를 전환 하 는 효 과 를 실현 할 수 있 습 니 다.좌우 로 미 끄 러 지지 않 고 viewPager 와 결합 하여 이 효 과 를 실현 할 수 있 습 니 다.
Fragment TabHost 가 자주 사용 하 는 방법 을 먼저 살 펴 보 겠 습 니 다.

- setup()    addTab               FragmentManager,Fragment   id 
- addTab()      
- newTabSpec()    tab 
- setCurrentTab()           
- setOnChangeTabListtener   tab       
- tabHost.getTabWidget().setDividerDrawable(null); //      
- Tab     ： 
- setIndicator()     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 는 이것 과 유사 합 니 다.

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("  ");
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="  "
android:layout_gravity="center"/>
</LinearLayout>

selector 는 거의 비슷 해 요.여기에 붙 여 주세요.

<?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>

자바 코드
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,"  ")), DiscoverFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"  ")), 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 에 감청 을 추가 하여 연동 합 니 다.

/**
*  TabHost viewPager          
*/
private void bindTabAndPager() {
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
/**
* tab   
* @param tabId   tab tag
*/
@Override
public void onTabChanged(String tabId) {
log("vonTabChanged:"+tabId);
int position = tabHost.getCurrentTab();
pager.setCurrentItem(position,true);
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*        
* @param position             ，              pager，     position   -1（   pager      ），   position   （       ），
* @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      index
*/
@Override
public void onPageSelected(int position) {
tabHost.setCurrentTab(position);
log("onPageSelected==========:position:"+position);
}
/**
*            
* @param state              
*/
@Override
public void onPageScrollStateChanged(int state) {
String stateStr="";
switch (state){
case ViewPager.SCROLL_STATE_DRAGGING:
stateStr="    ";
break;
case ViewPager.SCROLL_STATE_SETTLING:
stateStr="                 ";
break;
case ViewPager.SCROLL_STATE_IDLE:
stateStr="    ，        ";
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();
//      TabHost viewPager
bindTabAndPager();
}
/**
*  TabHost viewPager          
*/
private void bindTabAndPager() {
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
/**
* tab   
* @param tabId   tab tag
*/
@Override
public void onTabChanged(String tabId) {
log("vonTabChanged:"+tabId);
int position = tabHost.getCurrentTab();
pager.setCurrentItem(position,true);
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*        
* @param position             ，              pager，     position   -1（   pager      ），   position   （       ），
* @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      index
*/
@Override
public void onPageSelected(int position) {
tabHost.setCurrentTab(position);
log("onPageSelected==========:position:"+position);
}
/**
*            
* @param state              
*/
@Override
public void onPageScrollStateChanged(int state) {
String stateStr="";
switch (state){
case ViewPager.SCROLL_STATE_DRAGGING:
stateStr="    ";
break;
case ViewPager.SCROLL_STATE_SETTLING:
stateStr="                 ";
break;
case ViewPager.SCROLL_STATE_IDLE:
stateStr="    ，        ";
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,"  ")), DiscoverFragment.class,null);
tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"  ")), 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 확장 패 키 지 를 입력 하기 전에 확장 패 키 지 를 가 져 와 야 합 니 다.
tabLayout 는 자동 으로 viewPager 를 연결 할 수 있 습 니 다.tabLayout 에 연 결 된 viewPager 를 지정 하면 됩 니 다.
이렇게 하면 매우 편리 하지만 단점 도 있 습 니 다.자동 으로 연 결 된 후에 tabLayout 는 자동 으로 viewPager 의 title 을 읽 습 니 다.자체 적 인 view 를 tab 로 사용 하려 면 불가능 합 니 다.
design 확장 패 키 지 를 v7 위 에 나란히 가 져 옵 니 다.

레이아웃 은 두 개의 TabLayout 를 사용 하여 각각 자동 연결 과 수 동 연결 을 실현 합 니 다.

<?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">
<!--       -->
<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>
<!--       -->
<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>

자동 으로 연 결 된 tab 을 초기 화하 고 viewPager 와 연결 하기

private void initTabLayoutAndPager() {
//   viewPager       tab       pager title，  addTab    
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 자동 연결 추가 해도 소 용 없어 요.

tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"  ")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"  ")));
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);//     

viewPager 의 감청 설정 과 TabLayout 의 감청 연결

tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
/**
*   tab   
* @param tab    tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
// pager   
pager.setCurrentItem(tab.getPosition(),true);
}
/**
*          
* @param tab      tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
/**
*        
* @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) {
//   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();
//                    
bindPagerAndTab();
}
private void bindPagerAndTab() {
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"  ")));
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"  ")));
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   
* @param tab    tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
// pager   
pager.setCurrentItem(tab.getPosition(),true);
}
/**
*          
* @param tab      tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
/**
*        
* @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) {
//   TabLayout
tabLayoutMenu.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initTabLayoutAndPager() {
//   viewPager       tab       pager title，  addTab    
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;
}
}

효과 도
 
여기에 view Pager 어댑터 를 붙 여 볼 게 요.

public class FragmentAdapter extends FragmentPagerAdapter {
List<Fragment> fragments ;
private String[] titles = new String[]{"  ","  ","  ","  "};
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];
}
}

지금 이 몇 가지 방식 을 총 결 하여 다른 방식 을 생각 하고 다시 총 결 하 였 다.
이 데모 에 대한 github:https://github.com/sky-mxc/AndroidDemo/tree/master/fragment
위 에서 보 여 준 것 은 소 편 이 소개 한 안 드 로 이 드 개발 의 위 챗 하단 메뉴 모음 에서 이 루어 진 몇 가지 방법 을 모 은 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!