ViewPager + Fragment 實現類微信介面

阿新 • • 發佈：2018-12-20

在如今的網際網路時代，微信已是一個超級App。這篇通過ViewPager + Fragment實現一個類似於微信的介面，之前有用FragmentTabHost實現過類似介面，ViewPager的實現方式相對於FragmentTabHost的方式更簡單明瞭。

ViewPager:

　　ViewPager繼承自ViewGroup,是一個容器類，可以往裡新增View.

　　ViewPager的使用很簡單，通過setAdapter()方法設定一個PagerAdapter即可，這個PagerAdapter需要自己寫，實現裡面的一些方法。本篇要和Fragment結合，所以實現的是FragmentPagerAdapter類，FragmentPagerAdapter繼承自PagerAdapter.

　　ViewPager通過addOnPageChangeListener（）方法可以設定一個ViewPager.OnPageChangeListener監聽，當Pager發生變化時就呼叫相應的方法。

Fragment:

　　Fragment有自己的生命週期，有興趣的可以自己通過各種方式研究下（自己打Log看是最簡單的一種方式），這裡就不在贅述。和ViewPager結合，有幾個Pager就需要實現幾個不同的Fragment.

先看一下最後實現的效果圖：

佈局上分為三部分：

　　最上面的layout_top.xml,主要就是上面那個標題，就一個TextView，中間的ViewPager,最下面的layout_bottom.xml包括三個線性佈局，每個線性佈局包括一個ImageView和TextView.

activity_main.xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.viewpagerl.MainActivity">

    <include layout="@layout/layout_top"></include>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/ViewPagerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/layout_bottom"></include>

</LinearLayout>

layout_top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="3dp"
    android:paddingBottom="3dp"
    android:background="@android:color/darker_gray">

    <TextView
        android:id="@+id/ViewTitle"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="5dp"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

layout_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingTop="3dp"
    android:paddingBottom="3dp"
    android:background="@android:color/holo_green_light">

    <LinearLayout
        android:id="@+id/firstLinearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/firstImageView"
            android:background="@drawable/tab_weixin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/firstTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/secondLinearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/secondImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_setting"/>
        <TextView
            android:id="@+id/secondTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/threeLinearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/threeImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_find"/>
        <TextView
            android:id="@+id/threeTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="發現"
            />
    </LinearLayout>
</LinearLayout>

上面有提到，ViewPager需要實現一個Pageradapter，很簡單繼承FragmentPagerAdapter,實現裡面的getItem()和getCount()方法即可。

ViewPagerFragmentAdapter .java

package com.example.administrator.viewpagerl;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.util.Log;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mList = new ArrayList<Fragment>();
    public ViewPagerFragmentAdapter(FragmentManager fm , List<Fragment> list) {
        super(fm);
        this.mList = list;
    }

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList != null ? mList.size() : 0;
    }
}

ViewPager的每個Pager都需要一個Fragment,Fragment會例項化佈局，顯示在ViewPager的每個Pager中

ChatFragment.java

package com.example.administrator.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.administrator.viewpagerl.R;

public class ChatFragment extends Fragment {

    View mView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (mView == null) {
            mView = inflater.inflate(R.layout.fragment_layout,null);
        }
        ((TextView)mView.findViewById(R.id.mTextView)).setText("聊天介面");
        return mView;
    }
}

這裡需要三個Fragment,因為這裡使用的佈局很簡單，三個佈局基本是一致的，FriendFragment、FindFragment 這裡就都不貼出程式碼了。微信裡面的聊天列表，朋友列表都是在Fragment裡面例項化的佈局裡有個ListView,通過ListView的方式實現的，這裡只是為了記錄ViewPager就沒有實現那些，有興趣的可以自己搞搞，其實也不難。

　　在Activity裡面只需要給ViewPager設定上面那個Adapter,設定一個監聽知道Pager如何變化即可。點選最下面微信、朋友、發現三個按鈕，通過ViewPager的setCurrentItem()方法就能跳轉到對應的Pager，除了這些還有就是通過一些簡單的邏輯，控制一下介面的改變就行，沒有太難的東西。

MainActivity.java

package com.example.administrator.viewpagerl;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.administrator.fragment.ChatFragment;
import com.example.administrator.fragment.FindFragment;
import com.example.administrator.fragment.FriendFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String TAG = "MainActivity.TAG";
    TextView titleTextView;
    public LinearLayout firstLinearLayout;
    public LinearLayout secondLinearLayout;
    public LinearLayout threeLinearLayout;
    ViewPager mViewPager;
    ViewPagerFragmentAdapter mViewPagerFragmentAdapter;
    FragmentManager mFragmentManager;

    String[] titleName = new String[] {"微信","朋友","發現"};
    List<Fragment> mFragmentList = new ArrayList<Fragment>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mFragmentManager = getSupportFragmentManager();
        setContentView(R.layout.activity_main);
        initFragmetList();
        mViewPagerFragmentAdapter = new ViewPagerFragmentAdapter(mFragmentManager,mFragmentList);
        initView();
        initViewPager();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    public void initViewPager() {
        mViewPager.addOnPageChangeListener(new ViewPagetOnPagerChangedLisenter());
        mViewPager.setAdapter(mViewPagerFragmentAdapter);
        mViewPager.setCurrentItem(0);
        titleTextView.setText(titleName[0]);
        updateBottomLinearLayoutSelect(true,false,false);
    }

    public void initFragmetList() {
        Fragment chat = new ChatFragment();
        Fragment friend = new FriendFragment();
        Fragment find = new FindFragment();
        mFragmentList.add(chat);
        mFragmentList.add(friend);
        mFragmentList.add(find);
    }

    public void initView() {
        titleTextView = (TextView) findViewById(R.id.ViewTitle);
        mViewPager = (ViewPager) findViewById(R.id.ViewPagerLayout);
        firstLinearLayout = (LinearLayout) findViewById(R.id.firstLinearLayout);
        firstLinearLayout.setOnClickListener(this);
        secondLinearLayout = (LinearLayout) findViewById(R.id.secondLinearLayout);
        secondLinearLayout.setOnClickListener(this);
        threeLinearLayout = (LinearLayout) findViewById(R.id.threeLinearLayout);
        threeLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.firstLinearLayout:
                mViewPager.setCurrentItem(0);
                updateBottomLinearLayoutSelect(true,false,false);
                break;
            case R.id.secondLinearLayout:
                mViewPager.setCurrentItem(1);
                updateBottomLinearLayoutSelect(false,true,false);
                break;
            case R.id.threeLinearLayout:
                mViewPager.setCurrentItem(2);
                updateBottomLinearLayoutSelect(false,false,true);
                break;
            default:
                break;
        }
    }
    private void updateBottomLinearLayoutSelect(boolean f, boolean s, boolean t) {
        firstLinearLayout.setSelected(f);
        secondLinearLayout.setSelected(s);
        threeLinearLayout.setSelected(t);
    }
    class ViewPagetOnPagerChangedLisenter implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//            Log.d(TAG,"onPageScrooled");
        }
        @Override
        public void onPageSelected(int position) {
            Log.d(TAG,"onPageSelected");
            boolean[] state = new boolean[titleName.length];
            state[position] = true;
            titleTextView.setText(titleName[position]);
            updateBottomLinearLayoutSelect(state[0],state[1],state[2]);
        }
        @Override
        public void onPageScrollStateChanged(int state) {
            Log.d(TAG,"onPageScrollStateChanged");
        }
    }
}

其實就這麼簡單，只要動動手很容易實現的。有什麼不對的地方，還望大神指點。

ViewPager + Fragment 實現類微信介面

ViewPager + Fragment 實現類微信介面

Android Studio使用ViewPager+Fragment實現仿微信滑動切換介面

Android ViewPager和Fragment實現仿微信導航介面及滑動效果

Android RadioGroup+ViewPager+ActionBar實現仿微信6.0介面(底部滑動選單欄+導航欄)

python --itchat實現呼叫微信介面的方法

#android 利用fragment實現模仿微信的例項

Android 仿微信介面使用RadioGroup+ViewPager實現底部按鈕切換以及滑動

Android ViewPager實現滑動切換頁面+底部tab點選切換頁面（類微信首頁）

FragmentManager+Fragment實現微信介面佈局

TabLayout+ViewPager+Fragment實現多條目載入（多個介面）

完整的微信介面類（轉）

mui、HBuilder、 HTML5+實現分享微信分享介面閃退的問題

呼叫微信介面實現網頁分享小功能

用 node 實現仿微信風格的 token 獲取介面

多種方式實現底部選單欄（仿微信介面）

高仿仿微信介面二維碼掃描效果之 Android 基於google Zxing實現二維碼、條形碼掃描

電商類微信小程式，庫存不超賣實現

企業微信介面開發之使用httpclient實現https請求

安卓開發筆記——多種方式實現底部選單欄（仿微信介面）

微信小程式初探【類微信UI聊天簡單實現】

ViewPager + Fragment 實現類微信介面

相關推薦