安卓仿微信Tab頁用Fragment實現

石曼迪發表於2016-08-18

安卓Fragment

最終效果圖如：

實現步驟：

新建專案tabdemo，我選的是4.0.3版本，然後依次新建三個Fragment，名字分別為：ChatFragment、FriendFragment、FindFragment，他會生成對應的介面佈局xml檔案。

專案資源管理器結構如下：

Drawable中是用到的三張圖片，可自行找然後粘進去。

對應的Java程式碼如下：

package com.example.administrator.tabdemo;


import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
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;


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_chat,null);
        }
        ((TextView)mView.findViewById(R.id.mTextView)).setText("聊天介面");
        return mView;
    }
}

View Code

package com.example.administrator.tabdemo;


import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
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;

public class FriendFragment 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_friend,null);
        }
        ((TextView)mView.findViewById(R.id.ffTextView)).setText("好友介面");
        return mView;
    }
}

View Code

package com.example.administrator.tabdemo;


import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
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;


public class FindFragment 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_find,null);
        }
        ((TextView)mView.findViewById(R.id.sTextView)).setText("查詢介面");
        return mView;
    }
}

View Code

對應的xml佈局檔案如下：

<FrameLayout 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"
    tools:context="com.example.administrator.tabdemo.ChatFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/mTextView"
        android:layout_gravity="center" />

</FrameLayout>

View Code

<FrameLayout 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"
    tools:context="com.example.administrator.tabdemo.FriendFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/ffTextView"
        android:layout_gravity="center" />

</FrameLayout>

View Code

<FrameLayout 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"
    tools:context="com.example.administrator.tabdemo.FindFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/sTextView"
        android:layout_gravity="center" />

</FrameLayout>

View Code

另有頂部和底部，直接新建xml佈局即可：
layout_bottom.xml和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: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>

View Code

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

View Code

最後新建一個類ViewPagerFragmentAdapter繼承自FragmentPagerAdapter，程式碼如下：

package com.example.administrator.tabdemo;

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;
    }
}

View Code

再是MainActivity類，程式碼如下：

package com.example.administrator.tabdemo;

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

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

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");
        }
    }
}

View Code

完整程式碼下載

Android仿微信介面--使用Fragment實現(慕課網筆記)
2016-04-12
AndroidFragment筆記
用CSS實現Tab頁切換效果
2019-03-04
CSS
Tab頁介面，用jQuery及Ajax技術實現
2017-11-16
jQuery
Flutter仿頭條頂部tab切換實現
2020-02-12
Flutter
微信小程式自定義tab，多層tab巢狀實現
2019-03-04
微信小程式巢狀
安卓開發：viewpager + fragment 實現滑動切換
2018-07-31
安卓ViewpagerFragment
ViewPager、Fragment和TabLayout實現切頁效果
2019-03-30
ViewpagerFragmentTabLayout
TabLayout+ViewPager+Fragment實現切頁展示
2018-08-27
TabLayoutViewpagerFragment
仿京東、淘寶首頁，通過兩層巢狀的RecyclerView實現tab的吸頂效果
2019-08-23
巢狀View
Flutter開發實戰高仿微信（1）首頁
2020-05-15
Flutter
安卓開發：安卓底部選單欄的實現，RadioGroup 和Fragment
2018-06-30
安卓Fragment
微信小程式的tab選項卡的實現
2017-11-02
微信小程式
Vue路由+Tab元件實現多頁籤功能
2022-11-24
Vue路由元件
利用ViewPager和Fragment實現頁卡切換
2018-03-07
ViewpagerFragment
用純css實現Tab切換
2018-07-17
CSS
安卓關閉fragment
2020-11-17
安卓Fragment
Blazor如何實現類似於微信的Tab切換？
2023-01-23
Blazor
專案常用效果！Flutter仿頭條頂部tab切換實現！
2020-02-13
Flutter
TabLayout + ViewPager +Fragment 實現頁面的動態重新整理
2018-07-07
TabLayoutViewpagerFragment
flutter實戰專案，教你使用flutter打造仿微信app頁面！
2020-03-03
FlutterAPP
UI介面微信底部（ViewPager實現Tab，左右滑動+底部點選）
2020-04-05
UIViewpager
[微信開發] 微信網頁授權Java實現
2017-04-14
網頁Java
Android側滑返回分析和實現（不高仿微信）
2018-08-06
Android
vue 網頁版聊天系統|仿微信、微博網頁端
2019-07-15
Vue網頁
HarmonyOS NEXT應用開發之Tab元件實現增刪Tab標籤
2024-04-18
元件
如何實現仿微信介面[我的+首頁聊天列表+長按選單功能+新增選單功能]
2024-04-05
C/C++ Qt Tree與Tab元件實現分頁選單
2021-11-30
C++QT元件
Android利用感測器實現-仿微信搖一搖
2017-05-02
Android
數控開發 · 元件 · 仿微信的首頁面
2020-12-02
元件
vue 高仿微信即時 IM 聊天|仿微信 vue+h5 版|仿微信介面
2019-07-15
VueH5
C++ Qt開發：Tab與Tree元件實現分頁選單
2023-12-16
C++QT元件
Android 實現一個仿微信的圖片選擇器
2017-05-15
Android
基於Flutter的仿微信聊天應用
2020-02-13
Flutter
安卓自定義View實現圖片上傳進度顯示（仿QQ）
2015-07-27
安卓View
UITableview巢狀UITableView案例實踐（仿淘寶商品詳情頁實現）
2016-08-09
UIView巢狀
仿UC瀏覽器首頁下拉動畫及實現分析
2016-11-26
瀏覽器動畫
ajax 實現微信網頁授權登入
2019-02-16
網頁
iOS開發之微信聊天頁面實現
2015-12-19
iOS

安卓仿微信Tab頁用Fragment實現

相關文章