Androidが開発したWeChatの下のメニューバーで実現するいくつかの方法をまとめます。
20571 ワード
実装
実現する方法はいろいろあります。ここで一番よくある方法をまとめて、後で他のものを加えます。
view Pager+Radio Group
view Pager+FrangementabHost
view pager+TabLayout
view Pager+Radio Group
これは一番簡単なものだと思います。コードを貼らないで理解の考え方を話しましょう。
pagerとRadioGroupにモニターを追加することで、二つのコントロールの変化をモニターすることで連動が可能になります。
ビューPagerの表示pagerが変更されるとモニターが起動します。モニターで対応するRadio Buttonを選択してください。
RadioGroupが選択変更された場合もモニターを起動し、選択変更後に対応するpagerを設定すればいいです。
FrangementabHost+viewpager
この方式は上記の方式とほぼ連動しています。
FragmentTabHostのみを使用すると、tabをクリックしてページを切り替える効果しか実現できず、左右のスライドを実現できず、viePagerと結合してちょうどこの効果を実現します。
まず、フラジャメントTabHostがよく使う方法を見てみます。
初期化TabHost
view pager+TabLayout
TabLayout入力designの拡張パッケージは使用前に拡張パッケージを導入しなければなりません。
tabLayoutは自動的にview Pagerに繋がります。tabLayoutに関連するview Pagerを指定すればいいです。
便利になりましたが、欠点もあります。自動的に関連してから、tabLayoutは自動的にview Pagerのtitleを読みに行きます。自分で決めたviewをtabとして使いたいです。
design拡張パッケージを導入してv 7の上に並べます。
ここでは2つのTabLayoutを使用して、それぞれ自動関連と手動関連を実現しています。
TabLayoutにview自動関連を追加しても無駄です。
ここにviewPagerのアダプターを貼ってください。
このデモについてのギthub:https://github.com/sky-mxc/AndroidDemo/tree/master/fragment
以上のように、小编で绍介したAndroid开発のWeChatの下のメニュー栏で実现したいくつかの方法をまとめました。
実現する方法はいろいろあります。ここで一番よくある方法をまとめて、後で他のものを加えます。
view Pager+Radio Group
view Pager+FrangementabHost
view pager+TabLayout
view Pager+Radio Group
これは一番簡単なものだと思います。コードを貼らないで理解の考え方を話しましょう。
pagerとRadioGroupにモニターを追加することで、二つのコントロールの変化をモニターすることで連動が可能になります。
ビューPagerの表示pagerが変更されるとモニターが起動します。モニターで対応するRadio Buttonを選択してください。
RadioGroupが選択変更された場合もモニターを起動し、選択変更後に対応するpagerを設定すればいいです。
FrangementabHost+viewpager
この方式は上記の方式とほぼ連動しています。
FragmentTabHostのみを使用すると、tabをクリックしてページを切り替える効果しか実現できず、左右のスライドを実現できず、viePagerと結合してちょうどこの効果を実現します。
まず、フラジャメント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>
Frame gentは簡単なためにレイアウトファイルを書かないです。他の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>
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," ")), 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
*/
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+"=");
}
}
効果は以下の通りですview pager+TabLayout
TabLayout入力designの拡張パッケージは使用前に拡張パッケージを導入しなければなりません。
tabLayoutは自動的にview Pagerに繋がります。tabLayoutに関連するview Pagerを指定すればいいです。
便利になりましたが、欠点もあります。自動的に関連してから、tabLayoutは自動的にview Pagerのtitleを読みに行きます。自分で決めたviewをtabとして使いたいです。
design拡張パッケージを導入してv 7の上に並べます。
ここでは2つの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);//
view Pagerのモニターと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;
}
}
効果図ここにviewPagerのアダプターを貼ってください。
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];
}
}
これらの方法をまとめました。他の方法を考えてまとめます。このデモについてのギthub:https://github.com/sky-mxc/AndroidDemo/tree/master/fragment
以上のように、小编で绍介したAndroid开発のWeChatの下のメニュー栏で実现したいくつかの方法をまとめました。