2. 程式人生 > >android自定義底部Tab導航UI，專案整體介面框架

android自定義底部Tab導航UI，專案整體介面框架

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

android自定義底部Tab導航UI，專案整體介面框架

共享一個自己在開發過程中搭建的android專案介面框架，便於提高開發效率。

主要功能
1.使用Button自定義底部Tab和Title

2.點選底部Tab後使用Fragment切換頁面

3.主頁使用ViewPager滾動顯示新聞圖片

4.自定義類處理Fragment重疊回退問題

一、自定義底部Tab類

/*******************************************************************************
 *
 * Copyright (c) Weaver Info Tech Co. Ltd
 *
 * TabView
 *
 * app.ui.widget.TabView.java
 * TODO: File description or class description.
 *
 * @author: Administrator
 * @changeLogs:
 *     1.0.0: First created this class.
 *
 ******************************************************************************/
package app.ui.widget;
 
import mobi.kuaidian.qunakao.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
 
/**
 * @author Administrator
 *
 */
public class TabView extends LinearLayout implements OnClickListener {
 
    private OnTabChangeListener mOnTabChangedListener;
    private int mState = 0;
    private final Button mStateButton1;
    private final Button mStateButton2;
    private final Button mStateButton3;
    private final Button mStateButton4;
 
    public TabView(Context context) {
        this(context, null);
    }
 
    public TabView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    /**
     * @param context
     * @param attrs
     * @param defStyle
     */
    public TabView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        inflate(context, R.layout.view_tab, this);
        mStateButton1 = (Button) findViewById(R.id.button_state1);
        mStateButton2 = (Button) findViewById(R.id.button_state2);
        mStateButton3 = (Button) findViewById(R.id.button_state3);
        mStateButton4 = (Button) findViewById(R.id.button_state4);
 
        mStateButton1.setOnClickListener(this);
        mStateButton2.setOnClickListener(this);
        mStateButton3.setOnClickListener(this);
        mStateButton4.setOnClickListener(this);
    }
 
    public void setOnTabChangeListener(OnTabChangeListener listener) {
        mOnTabChangedListener = listener;
    }
 
    public void setCurrentTab(int index) {
        switchState(index);
    }
 
    private void switchState(int state) {
        if (mState == state) {
            return;
        } // else continue
 
        mState = state;
        mStateButton1.setSelected(false);
        mStateButton2.setSelected(false);
        mStateButton3.setSelected(false);
        mStateButton4.setSelected(false);
 
        Object tag = null;
 
        switch (mState) {
            case 0:
                mStateButton1.setSelected(true);
                tag = mStateButton1.getTag();
                break;
 
            case 1:
                mStateButton2.setSelected(true);
                tag = mStateButton2.getTag();
                break;
 
            case 2:
                mStateButton3.setSelected(true);
                tag = mStateButton3.getTag();
                break;
 
            case 3:
                mStateButton4.setSelected(true);
                tag = mStateButton4.getTag();
                break;
 
            default:
                break;
        }
 
        if (mOnTabChangedListener != null) {
            if (tag != null && mOnTabChangedListener != null) {
                mOnTabChangedListener.onTabChange(tag.toString());
            } else {
                mOnTabChangedListener.onTabChange(null);
            }
        } // else ignored
    }
 
 
    /* (non-Javadoc)
     * @see android.view.View.OnClickListener#onClick(android.view.View)
     */
    @Override
    public void onClick(View v) {
 
        // TODO Auto-generated method stub
        switch (v.getId()) {
            case R.id.button_state1:
                switchState(0);
                break;
 
            case R.id.button_state2:
                switchState(1);
                break;
 
            case R.id.button_state3:
                switchState(2);
                break;
 
            case R.id.button_state4:
                switchState(3);
                break;
 
            default:
                break;
        }
    }
 
    public static interface OnTabChangeListener {
        public void onTabChange(String tag);
    }
}


二、對應底部Tab的XML佈局檔案

<merge xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0" >
 
        <Button
            android:id="@+id/button_state1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/ic_message_selector"
            android:gravity="center"
            android:singleLine="true"
            android:tag="message"
            android:text="@string/text_tab_message"
            android:textColor="@color/text_service_color"
            android:textSize="14dp" />
    </FrameLayout>
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0" >
 
        <Button
            android:id="@+id/button_state2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/ic_service_selector"
            android:gravity="center"
            android:singleLine="true"
            android:tag="service"
            android:text="@string/text_tab_service"
            android:textColor="@color/text_service_color"
            android:textSize="14dp" />
    </FrameLayout>
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0" >
 
        <Button
            android:id="@+id/button_state3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/ic_profile_selector"
            android:gravity="center"
            android:singleLine="true"
            android:tag="personal"
            android:text="@string/text_tab_profile"
            android:textColor="@color/text_service_color"
            android:textSize="14dp" />
    </FrameLayout>
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0" >
 
        <Button
            android:id="@+id/button_state4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/ic_setting_selector"
            android:gravity="center"
            android:singleLine="true"
            android:tag="settings"
            android:text="@string/text_tab_setting"
            android:textColor="@color/text_service_color"
            android:textSize="14dp" />
    </FrameLayout>
 
</merge>

三、在啟動的Acitvity介面中使用自定義的Tab類

<?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="match_parent"
    android:orientation="vertical" >
 
    <include layout="@layout/layout_titlebar" />
 
    <FrameLayout
        android:id="@+id/layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0" />
 
    <app.ui.widget.TabView
        android:id="@+id/view_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/header_height"
        android:background="@color/tab_main_color" />
 
</LinearLayout>

四、自定義類處理Fragment返回重疊的問題

/*******************************************************************************
 *
 * Copyright (c) Baina Info Tech Co. Ltd
 *
 * FragmentUtils
 *
 * app.util.FragmentUtils.java
 * TODO: File description or class description.
 *
 * @changeLogs:
 *     1.0.0: First created this class.
 *
 ******************************************************************************/
package app.util;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
 
/**
 * FragmentUtils of MyHealth
 *
 * @author qixiao
 */
public class FragmentUtils {
 
    private FragmentUtils() {
 
    }
 
    public static Fragment replaceFragment(FragmentManager fragmentManager, int container,
            Class<? extends Fragment> newFragment, Bundle args) {
        return replaceFragment(fragmentManager, container, newFragment, args, false);
    }
 
    public static Fragment replaceFragment(FragmentManager fragmentManager, int container,
            Fragment newFragment) {
        return replaceFragment(fragmentManager, container, newFragment, false);
    }
 
    public static Fragment replaceFragment(FragmentManager fragmentManager, int container,
            Class<? extends Fragment> newFragment, Bundle args, boolean addToBackStack) {
 
        Fragment fragment = null;
 
        // 構造新的Fragment
        try {
            fragment = newFragment.newInstance();
        } catch (InstantiationException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
 
        if (fragment != null) {
            // 設定引數
            if (args != null && !args.isEmpty()) {
                final Bundle bundle = fragment.getArguments();
                if (bundle != null) {
                    bundle.putAll(args);
                } else {
                    fragment.setArguments(args);
                }
            }
            // 替換
            return replaceFragment(fragmentManager, container, fragment, addToBackStack);
        } else {
            return null;
        }
    }
 
    public static Fragment replaceFragment(FragmentManager fragmentManager, int container,
            Fragment newFragment, boolean addToBackStack) {
        final FragmentTransaction transaction = fragmentManager.beginTransaction();
        final String tag = newFragment.getClass().getSimpleName();
 
        if (newFragment != null) {
            transaction.replace(container, newFragment, tag);
        }
 
        if (addToBackStack) {
            transaction.addToBackStack(null);
        }
        transaction.commitAllowingStateLoss();
        return newFragment;
    }
 
    public static Fragment switchFragment(FragmentManager fragmentManager, int container,
            Fragment currentFragment, Class<? extends Fragment> newFragment, Bundle args) {
        return switchFragment(fragmentManager, container, currentFragment, newFragment, args, false);
    }
 
    /**
     *
     * @param fragmentManager
     * @param container
     * @param currentFragment
     * @param newFragment
     * @param args 新Fragment的引數
     * @param addToBackStack 這個操作是否加入棧中，如果要實現類似返回效果，則需要。
     * @return 新顯示的Fragment
     */
    public static Fragment switchFragment(FragmentManager fragmentManager, int container,
            Fragment currentFragment, Class<? extends Fragment> newFragment, Bundle args,
            boolean addToBackStack) {
 
        final FragmentTransaction transaction = fragmentManager.beginTransaction();
        final String tag = newFragment.getSimpleName();
        Fragment fragment = fragmentManager.findFragmentByTag(tag);
 
        // 如果在棧中找到相應的Fragment，則顯示，否則重新生成一個
        if (fragment != null) {
            if (fragment != currentFragment) {
                if (currentFragment != null) {
                    transaction.hide(currentFragment);
                }
                transaction.show(fragment);
                if (addToBackStack) {
                    transaction.addToBackStack(null);
                }
                transaction.commitAllowingStateLoss();
            } else {
                fragment.getArguments().putAll(args);
            }
 
            return fragment;
        } else {
            try {
                fragment = newFragment.newInstance();
            } catch (InstantiationException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
        }
 
        // 為新的Fragment新增引數
        if (fragment != null) {
            if (args != null && !args.isEmpty()) {
                final Bundle bundle = fragment.getArguments();
                if (bundle != null) {
                    bundle.putAll(args);
                } else {
                    fragment.setArguments(args);
                }
            }
        }
 
        // 顯示新的Fragment
        if (currentFragment != null) {
            transaction.hide(currentFragment);
        }
        transaction.add(container, fragment, tag);
        if (addToBackStack) {
            transaction.addToBackStack(null);
        }
        transaction.commitAllowingStateLoss();
 
        return fragment;
    }
 
}


原始碼下載地址：https://download.csdn.net/download/wo0123456789wo/10847244

相關推薦

android自定義底部Tab導航UI，專案整體介面框架

android自定義底部Tab導航UI，專案整體介面框架 共享一個自己在開發過程中搭建的android專案介面框架，便於提高開發效率。 主要功能 1.使用Button自定義底部Tab和Title 2.點選底部Tab後使用Fragment切換頁面 3.主頁使用ViewPager滾動

android 自定義底部導航欄

1.編寫佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+

Android 自定義可拖拽View，界面渲染刷新後不會自動回到起始位置

AD att starty attrs floating blog body .get dmi 以自定義ImageView為例： /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class

android 自定義TextView 流光字，彩色text

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="ht

android自定義星級評分控制元件，可實現只顯示實心星星

話不多說，上圖 近日app需求弄一個等級展示，看了下UI圖，只顯示實星（點亮的星星）.如圖 但是網上關於星級評分的例子大多這樣 也展示虛心星星 通過自定義View package com.starsbar; import android.content.C

Android自定義View的實現方法，帶你一步步深入瞭解View(四)

不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些

Android自定義view（一），打造絢麗的驗證碼

前言：我相信信念的力量，信念可以支撐起一個人，一個名族，一個國家。正如“人沒有夢想和鹹魚有什麼區別”一樣，我有信念，有理想，所以我正在努力向著夢想前進~。 自定義view，如果是我，我首先要看到自定義view的效果圖，然後再想想怎麼實現這種效果或功能，所以先貼

Android自定義View之導航欄(Fragment實現)

安卓輕量級底部導航欄 目前安卓開發中常常會用到底部導航欄這個控制元件，但是自己從零開始做一個又太麻煩。因此，我封裝了一個底部導航欄，同時，也做了一些修改，用於頂部也十分合適。下面是示例圖： 使用方法： 1.新增依賴 首先，在build.gradle檔案下加入 maven

(Android自定義View)來來來，一起再擼一個Material風格loadingView。

本文同步自博主的個人部落格wing的地方酒館 很久很久以前，擼了一款loadingview(點選這裡回顧)，當時覺得還不錯，現在看看覺得好醜啊！！！ 於是想再擼一個，無意間在這裡看到一個很不錯的效果，於是手癢了，就想動動手，算起來，也有很久沒有寫過View了。

Android自定義多TAB懸浮控制元件實現蘑菇街首頁效果

說明： 1.viewpager不能左右滑動； 2.轉載時程式碼略有改動（注：修復tab控制元件不能自動滑動的問題）； 3.原始碼下載後不能直接執行，經過調整此問題已經修復。 核心程式碼： package com.Imy.Fuli.Fra

Android自定義底部選單實現Fragment切換

關於android自定義底部選單實現與Fragment間的切換，實現過程大體如下：attrs.xml中的內容：<resources> <attr name="text" format="string"/> <att

android自定義圓角實線邊框，圓角虛線邊框，直實線，虛實線，半圓角邊框

先上圖。<img src="http://img.my.csdn.net/uploads/201510/05/1444048517_3752.png-thumb.jpg" width="1080" height="1920" style="font-family: A

android自定義滑動開關控制元件，適合所有的android系統

我們都知道Android4.0以上才帶有滑動開關Switch，那麼在4.0以下呢，很多人會選擇用CheckBox，放兩張圖片，但是這樣子只能點選，效果不太好，所以我就自定義了滑動開關WiperSwitch這麼一個控制元件，下面先把截圖貼上吧，這蹩腳的圖片真戳啊，大家可以自己換

Android自定義Spinner下拉框，可以設定提示文字

近期公司專案中需要用到下拉框，為了省事於是就用了自帶的Spinner，但使用後發現一個問題，就是不能設定提示文字。。並且，在父類是FragmentActivity的時候，還會有不一樣的顯示，總之使用起來非常的不爽。。於是就決定自己動手封裝一個Spinner來實現自己的效果，

Android 自定義ScrollView 支援慣性滑動，慣性回彈效果。支援上拉載入更多

先講下原理： ScrollView的子View 主要分為3部分：head頭部，滾動內容，fooder底部 我們實現慣性滑動，以及回彈，都是靠超過head或者fooder 就重新滾動到  ，內容的頂部或者底部。 之前看了Pulltorefresh 他是通過不斷改變 head或

Android自定義View實現圖片顯示，並實現縮放、拖拽、切換功能

這裡貼三個檔案的原始碼，第一個是main.java package com.example.test; import java.util.ArrayList; import java.util.List; import com.example.test.MyXZ; i

Android 自定義View（二），點，線的繪製

public class PointLine extends View { Paint mLinePaint; Paint mPointPaint; float width; float height; float pointAddress

關於資料序列化（4）自定義序列化的實現，支援常用集合框架

下面的示例很好的揭示瞭如何實現自定義序列化的方法。 支援byte, byte[], boolean, boolean[], int, int[], long, long[] ,double ,double[], String, String[], 以及Enum, List,Map兩種包

【Android自定義控制元件】炫酷的底部導航欄

https://github.com/WakeHao/NavBar 基本使用 使用這個控制元件，只需要簡單的幾部 引入該控制元件到你的專案中 compile 'com.chen.wakehao.library:bottom-navigation-bar:1.0.0'

Android自定義View之IndicatorView，顯示當前tab頁所處位置的View

概述 Android IndicatorView的靈感來源於SlidingTabView，雖然有句“不重複”造輪子在先，本著練手的目的，還是寫了一個功能較為簡單的類似view。 其比SlidingTabView在功能上欠缺的一點是：暫時沒有新增“當內容顯示不