利用FragmentTabHost和ViewPager實現(xiàn)類微信界面切換效果

生活本來就不容易,而我們的不努力只會讓生活變得更加無賴

今天學習了如何利用FragmentTabHost以及ViewPager的知識點,簡單寫了個demo實現(xiàn)界面滑動點擊切換的效果.現(xiàn)在市面上大部分的APP都有這種類似的功能,如微信,簡書等等,相信實現(xiàn)方法略同.因此便寫一篇日記記錄該功能的實現(xiàn).demo部分截圖如下:

demo截圖

FragmentTabHost的用法(要點)

  1. Activity必須繼承自FragmentActivity(AppCompatActivity為其子類).
  2. 使用setup()方法綁定Fragmenrt,
  3. 使用TabHost.TabSpec 設(shè)置spec,spec則需要indicator,indicator則需要View填充.
  4. 實現(xiàn)setOnTabChangedListener接口來對Viewpager的滑動進行監(jiān)聽

ViewPager的用法(要點)

1.Viewpager被添加在v4包當中,官方推薦結(jié)合Fragment使用以實現(xiàn)滑動切換的效果,因此需要一個適配器Adapter繼承FragmentPagerAdapter裝載Fragment.
2.實現(xiàn)addOnPageChangeListener接口來對FragmentTabHost的點擊的監(jiān)聽.

由上可知,我們需要寫幾個xml文件顯示相關(guān)::

  • tabhost.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:id="@+id/view_pager">
    </android.support.v4.view.ViewPager>
    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/tabhost"
        android:background="@android:color/white"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp">
        <FrameLayout
            android:layout_width="0dp"
            android:id="@android:id/tabcontent"
            android:layout_height="0dp"
            android:layout_weight="0">
        </FrameLayout>
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>```
 * 這里需要注意的地方是,在FragmentTabHost里面的FrameLayout的id必須為```@android:id/tabcontent```

* 給indicator填充的item_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="3dp">
</ImageView>
<TextView
android:id="@+id/tabtextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_gravity="center"
android:textColor="@color/tab_text">
</TextView>
</LinearLayout>```

  • fragment1.xml(這里需要四個,但全部相同,先貼出一個)
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="這是第一個Fragment"
        android:id="@+id/textView" />
</LinearLayout>```

#### ViewPager的適配器以及監(jiān)聽接口的實現(xiàn):
* MyAdapter.java

public class MyAdapter extends FragmentPagerAdapter{
private List<Fragment> views;
public MyAdapter(FragmentManager fm,List<Fragment> list) {
super(fm);
this.views = list;
}
@Override
public Fragment getItem(int position) {
return views.get(position);
}

@Override
public int getCount() {
    return views.size();
}

}```

  • MyPageChangeListener.java
public class MyPageChangeListener implements ViewPager.OnPageChangeListener {
    private FragmentTabHost tabHost;

    public MyPageChangeListener(FragmentTabHost tabHost) {
        this.tabHost = tabHost;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //界面被選擇時調(diào)用
        tabHost.setCurrentTab(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}```
#### Fragment(相同只貼一個)
* Fragment1.java

public class Fragment1 extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1,null);
}
}```

  • 注意Fragment必須繼承自v4包的.

因有多個資源需配置,所以進行簡單的封裝

  • Tab.java
public class Tab {
    //標題資源
    private int title;
    //圖片字圖案
    private int img;
    //Fragment類資源
    private Class Fragment;

    public Tab(int title, int img, Class fragment) {
        this.title = title;
        this.img = img;
        Fragment = fragment;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

    public Class getFragment() {
        return Fragment;
    }

    public void setFragment(Class fragment) {
        Fragment = fragment;
    }
}```

#### MainActivity.java

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class TabHost_Aty extends AppCompatActivity {

private FragmentTabHost tabHost;
private View view = null;
private LayoutInflater Inflater;
private List<Tab> list = new ArrayList<>(4);
private ViewPager viewPager;
private List<Fragment> FragmentList = new ArrayList<>(4);

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tabhost);
    Inflater = LayoutInflater.from(this);
    initTab();
}
//初始化資源
private void initTab() {
    tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    //綁定Viewpager
    tabHost.setup(this,getSupportFragmentManager(),R.id.view_pager);
    //添加資源
    Tab tabmain = new Tab(R.string.main, R.drawable.btn_notifi, Fragment1.class);
    Tab tabcontact = new Tab(R.string.contact, R.drawable.btn_contact, Fragment2.class);
    Tab tabmine = new Tab(R.string.setting, R.drawable.btn_mine, Fragment3.class);
    Tab tabfound = new Tab(R.string.find, R.drawable.btn_found, Fragment4.class);
    list.add(tabmain);
    list.add(tabcontact);
    list.add(tabmine);
    list.add(tabfound);

    for (Tab tab : list) {
        TabHost.TabSpec spec= tabHost.newTabSpec(getString(tab.getTitle()))//
        .setIndicator(getItemView(tab));
        tabHost.addTab(spec,tab.getFragment(),null);
    }
    //清除分界線
    tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
    
    initFragment();
}

/**
 * 初始化ViewPager
 */
private void initFragment() {
    FragmentList.add(new Fragment1());
    FragmentList.add(new Fragment2());
    FragmentList.add(new Fragment3());
    FragmentList.add(new Fragment4());
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    //設(shè)置適配器
    viewPager.setAdapter(new MyAdapter(getSupportFragmentManager(),FragmentList));
    //設(shè)置界面滑動監(jiān)聽事件
    viewPager.addOnPageChangeListener(new MyPageChangeListener(tabHost));
    //設(shè)置TabHost的點擊切換監(jiān)聽事件
    tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {
            int position  =tabHost.getCurrentTab();
            viewPager.setCurrentItem(position);
        }
    });
}
//給indicator配置View
private View getItemView(Tab tab) {
    view = Inflater.inflate(R.layout.item_view, null);

    ImageView img = (ImageView) view.findViewById(R.id.imageview);
    TextView textview = (TextView) view.findViewById(R.id.tabtextview);

    img.setImageResource(tab.getImg());
    textview.setText(tab.getTitle());

    return view;
}

}```

效果圖:

change.gif

如果你覺得本文有所錯漏,麻煩指出交流共同進步,謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評論 25贊 708
  • 實現(xiàn)效果 本實例主要實現(xiàn)用ViewPage和Fragment實現(xiàn)選項卡切換效果，選項卡個數(shù)為3個，點擊選項卡或滑動...
    空山fine閱讀 5,842評論 0贊 8
  • 本人初學Android，最近做了一個實現(xiàn)安卓簡單音樂播放功能的播放器，收獲不少，于是便記錄下來自己的思路與知識總結(jié)...
    落日柳風閱讀 19,201評論 2贊 41
  • 老桌、雪紙、漆墨， 懸筆。 欲落， 左胸有情欲落。 闔眼歸心， 頰邊云彩純白， 浪花指尖輕躍， 還有懷里的風， 詩...
    樸風llsk閱讀 516評論 1贊 5
  • 這本書的主題就是打破固定思維，用發(fā)展的眼光來看現(xiàn)在的問題。 由于受到自身經(jīng)驗的影響，當面臨同一類型的事情之時，我們...
    鴻蒙2019閱讀 299評論 0贊 0