ViewPager+Fragment实现仿微信首页

用Viewpager加上Fragment可以实现的界面。

这些微信，通讯录，发现，我的图标使用iconfont字体图标，这样清晰度非常的高，很清楚。

主要文件:

MainActivity:

<span style="font-size:18px;">package com.example.dior.fragment_viewpager;

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener{
    private LinearLayout tab_weixin;
    private LinearLayout tab_phone;
    private LinearLayout tab_find;
    private LinearLayout tab_my;

    private TextView text_weixin;
    private TextView text_phone;
    private TextView text_find;
    private TextView text_my;

    private TextView iconfont_weixin;
    private TextView iconfont_phone;
    private TextView iconfont_find;
    private TextView iconfont_my;

    private Fragment tab01;
    private Fragment tab02;
    private Fragment tab03;
    private Fragment tab04;
    private ViewPager mviewpager;
    private FragmentPagerAdapter mAdapter;
    List<Fragment> mFragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        initView();
        initEvents();
    }
    private void initView(){
        Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont.ttf");
        Typeface phone = Typeface.createFromAsset(getAssets(), "phone.ttf");
        mviewpager = (ViewPager)findViewById(R.id.id_viewpager);
        tab_weixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
        tab_phone = (LinearLayout)findViewById(R.id.id_tab_phone);
        tab_find = (LinearLayout)findViewById(R.id.id_tab_find);
        tab_my = (LinearLayout)findViewById(R.id.id_tab_my);
        text_weixin = (TextView)findViewById(R.id.id_text_weixin);
        text_phone = (TextView)findViewById(R.id.id_text_phone);
        text_find = (TextView)findViewById(R.id.id_text_find);
        text_my = (TextView)findViewById(R.id.id_text_my);
        iconfont_weixin = (TextView)findViewById(R.id.id_iconfont_weixin);
        iconfont_phone= (TextView)findViewById(R.id.id_iconfont_phone);
        iconfont_find = (TextView)findViewById(R.id.id_iconfont_find);
        iconfont_my = (TextView)findViewById(R.id.id_iconfont_my);
        iconfont_weixin.setTypeface(iconfont);
        iconfont_phone.setTypeface(phone);
        iconfont_find.setTypeface(iconfont);
        iconfont_my.setTypeface(iconfont);
        tab01 = new WeixinFragment();
        tab02 = new PhoneFragment();
        tab03 = new FindFragment();
        tab04 = new MyFragment();
        mFragments = new ArrayList<Fragment>();
        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
        mFragments.add(tab04);
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public android.support.v4.app.Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
        mviewpager.setAdapter(mAdapter);
    }
    private void initEvents(){
        tab_weixin.setOnClickListener(this);
        tab_phone.setOnClickListener(this);
        tab_find.setOnClickListener(this);
        tab_my.setOnClickListener(this);
        mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mviewpager.setCurrentItem(position);
                switch (position){
                    case 0:
                        setSelect(0);
                        break;
                    case 1:
                        setSelect(1);
                        break;
                    case 2:
                        setSelect(2);
                        break;
                    case 3:
                        setSelect(3);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    private void resetAll(){
        text_weixin.setTextColor(getResources().getColor(R.color.normal));
        text_phone.setTextColor(getResources().getColor(R.color.normal));
        text_find.setTextColor(getResources().getColor(R.color.normal));
        text_my.setTextColor(getResources().getColor(R.color.normal));
        iconfont_weixin.setText(getString(R.string.weixin_normal));
        iconfont_phone.setText(getString(R.string.phone_normal));
        iconfont_find.setText(getString(R.string.find_normal));
        iconfont_my.setText(getString(R.string.my_normal));
    }
    public void onClick(View v){
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_phone:
                setSelect(1);
                break;
            case R.id.id_tab_find:
                setSelect(2);
                break;
            case R.id.id_tab_my:
                setSelect(3);
                break;
        }
    }
    private void setSelect(int id){
        resetAll();
        switch (id){
            case 0:
                text_weixin.setTextColor(getResources().getColor(R.color.pressed));
                iconfont_weixin.setText(getString(R.string.weixin_pressed));
                break;
            case 1:
                text_phone.setTextColor(getResources().getColor(R.color.pressed));
                iconfont_phone.setText(getString(R.string.phone_pressed));
                break;
            case 2:
                text_find.setTextColor(getResources().getColor(R.color.pressed));
                iconfont_find.setText(getString(R.string.find_pressed));
                break;
            case 3:
                text_my.setTextColor(getResources().getColor(R.color.pressed));
                iconfont_my.setText(getString(R.string.my_pressed));
                break;
        }
        mviewpager.setCurrentItem(id);
    }
}</span>

四个Fragment就是中间的部分有四个可以切换:

<span style="font-size:18px;">package com.example.dior.fragment_viewpager;


import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class WeixinFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01, container, false);
    }
}
</span>

下面为xml布局文件:

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">
    <include layout="@layout/head"/>
    <include layout="@layout/top"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@color/white">

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/id_iconfont_weixin"
            android:textSize="30sp"
            android:background="#00000000"
            android:text="@string/weixin_pressed"/>
        <TextView
            android:id="@+id/id_text_weixin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="@color/pressed"
            android:textSize="12sp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_phone"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/id_iconfont_phone"
        android:textSize="30sp"
        android:background="#00000000"
        android:text="@string/phone_normal"/>
    <TextView
        android:id="@+id/id_text_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通讯录"
        android:textColor="@color/normal"
        android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_find"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/id_iconfont_find"
            android:textSize="30sp"
            android:background="#00000000"
            android:text="@string/find_normal"/>
        <TextView
            android:id="@+id/id_text_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"
            android:textColor="@color/normal"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_my"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/id_iconfont_my"
            android:textSize="30sp"
            android:background="#00000000"
            android:text="@string/my_normal"/>
        <TextView
            android:id="@+id/id_text_my"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textColor="@color/normal"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>

head.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="22dp"
    android:background="#282828">

</LinearLayout>

四个tab的布局都是一样的：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="#43a1e4"
            android:text="This is Weixin Tab"/>
    </LinearLayout>
</ScrollView>

配置文件string.xml

<resources>
    <string name="app_name">微信</string>
    <string name="action_settings">Settings</string>
    <string name="weixin_normal"></string>
    <string name="weixin_pressed"></string>
    <string name="phone_normal"></string>
    <string name="phone_pressed"></string>
    <string name="find_normal"></string>
    <string name="find_pressed"></string>
    <string name="my_normal"></string>
    <string name="my_pressed"></string>
</resources>

最后附上源代码: ViewPager+Fragment

司徒公子

发布了106 篇原创文章 · 获赞 69 · 访问量 8万+

私信关注

ViewPager+Fragment实现仿微信首页

猜你喜欢