Android 仿QQ主界面 Fragment + FrameLayout

这边就不介绍了Fragment产生原因，以及一些基本的用法和各种API，如果你还不熟悉的话，可以自行百度！这边直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <FrameLayout
        android:id="@+id/main_fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/tab_bg_line"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/tab_bg"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_chats"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick"
            android:orientation="vertical">

            <com.calendar.views.GradientIconView
                android:id="@+id/icon_calendar"
                android:layout_width="40dp"
                android:layout_height="35dp"
                app:bottom_icon="@mipmap/table_calendar_false"
                app:top_icon="@mipmap/table_calendar_true"/>

            <com.calendar.views.GradientTextView
                android:id="@+id/tv_calendar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:bottom_text_color="@color/tab_text_gray"
                app:text="@string/calendar"
                app:text_size="12sp"
                app:top_text_color="@color/tab_bg_red"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_contracts"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick"
            android:orientation="vertical">
            <com.calendar.views.GradientIconView
                android:id="@+id/icon_events"
                android:layout_width="40dp"
                android:layout_height="35dp"
                app:bottom_icon="@mipmap/table_recently_false"
                app:top_icon="@mipmap/table_recently_true"/>
            <com.calendar.views.GradientTextView
                android:id="@+id/tv_events"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:bottom_text_color="@color/tab_text_gray"
                app:text="@string/events"
                app:text_size="12sp"
                app:top_text_color="@color/tab_bg_red"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_aboutMe"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick"
            android:orientation="vertical">
            <com.calendar.views.GradientIconView
                android:id="@+id/icon_aboutMe"
                android:layout_width="40dp"
                android:layout_height="35dp"
                app:bottom_icon="@mipmap/table_owner_false"
                app:top_icon="@mipmap/table_owner_true"/>
            <com.calendar.views.GradientTextView
                android:id="@+id/tv_aboutMe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:bottom_text_color="@color/tab_text_gray"
                app:text="@string/me"
                app:text_size="12sp"
                app:top_text_color="@color/tab_bg_red"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

其中 GradientIconView、 GradientTextView是自定义的可渐变view，可以用来实现仿微信主界面效果，这边只是让透明度在0、1中切换：

/**
 * 自定义可以改变颜色的textView
 * 原理是：两张重叠textView根据viewpager滑动距离改变透明度，实现两张textView的切换
 */
public class GradientTextView extends FrameLayout {
    //topTextView
    private TextView mTopTextView;
    //bottomTextView
    private TextView mBottomTextView;
    //保存GradientIconView实例当前状态
    private static final String INSTANCE_STATE = "instance_state";
    //保存透明度状态
    private static final String STATE_ALPHA = "state_alpha";
    //透明度
    private float mAlpha = 0f;

    public GradientTextView(Context context) {
        this(context, null);
    }

    public GradientTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GradientTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        //自定义属性，获取设置的图标
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.GradientTextView);
        int color;
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            if (attr == R.styleable.GradientTextView_top_text_color) {
                color = a.getColor(attr, Color.TRANSPARENT);
                setTopTextColor(color);
            } else if (attr == R.styleable.GradientTextView_bottom_text_color) {
                color = a.getColor(attr, Color.BLACK);
                setBottomTextColor(color);
            } else if (attr == R.styleable.GradientTextView_text) {
                String text = a.getString(attr);
                setGradientText(text);
            } else if (attr == R.styleable.GradientTextView_text_size) {
                int size = a.getDimensionPixelSize(attr, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,
                                getResources().getDisplayMetrics()));
                setGradientTextSize(size);
            }
        }
        a.recycle();
        setTextViewAlpha(mAlpha);
    }

    /**
     * 设置上层文本颜色
     *
     * @param color 颜色
     */
    public void setTopTextColor(int color) {
        mTopTextView.setTextColor(color);
    }

    /**
     * 设置底层文本颜色
     *
     * @param color 颜色
     */
    public void setBottomTextColor(int color) {
        mBottomTextView.setTextColor(color);
    }


    /**
     * 初始化视图
     */
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.gradient_textview_layout, this, true);
        mTopTextView = (TextView) findViewById(R.id.tv_top);
        mBottomTextView = (TextView) findViewById(R.id.tv_bottom);
    }

    /**
     * 设置两层图片的透明度达到切换的效果
     *
     * @param alpha 透明度1~0；
     */
    public void setTextViewAlpha(float alpha) {
        mTopTextView.setAlpha(alpha);
        mBottomTextView.setAlpha(1 - alpha);
        this.mAlpha = alpha;
    }

    /**
     * 设置文本
     *
     * @param text 文本
     */
    public void setGradientText(String text) {
        mTopTextView.setText(text);
        mBottomTextView.setText(text);
    }

    /**
     * 设置文字大小
     *
     * @param textSize int
     */
    public void setGradientTextSize(int textSize) {
        mTopTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
        mBottomTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
    }

    /**
     * 非正常状态下退出该view时保存状态
     *
     * @return Parcelable
     */
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());
        bundle.putFloat(STATE_ALPHA, mAlpha);
        return bundle;
    }

    /**
     * 恢复到非正常退出前的状态
     *
     * @param state state
     */
    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            mAlpha = bundle.getFloat(STATE_ALPHA);
            super.onRestoreInstanceState(bundle.getBundle(INSTANCE_STATE));
        } else {
            super.onRestoreInstanceState(state);
        }
    }
}

/**
 * 自定义可以改变颜色的view
 * 原理是：两张重叠图片根据viewpager滑动距离改变透明度，实现两张图片的切换
 */
public class GradientIconView extends FrameLayout {
    //topIcon
    private ImageView mTopIconView;
    //bottomIcon
    private ImageView mBottomIconView;
    //保存GradientIconView实例当前状态
    private static final String INSTANCE_STATE = "instance_state";
    //保存透明度状态
    private static final String STATE_ALPHA = "state_alpha";
    //透明度
    private float mAlpha = 0f;

    public GradientIconView(Context context) {
        this(context, null);
    }

    public GradientIconView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GradientIconView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        //自定义属性，获取设置的图标
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.GradientIconView);
        Drawable drawable;
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            if (attr == R.styleable.GradientIconView_top_icon) {
                drawable = a.getDrawable(attr);
                setTopIconView(drawable);
            } else if (attr == R.styleable.GradientIconView_bottom_icon) {
                drawable = a.getDrawable(attr);
                setBottomIconView(drawable);
            }
        }
        a.recycle();
        setIconAlpha(mAlpha);
    }

    /**
     * 初始化视图
     */
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.gradient_icon_layout, this, true);
        mTopIconView = (ImageView) findViewById(R.id.top_icon_view);
        mBottomIconView = (ImageView) findViewById(R.id.bottom_icon_view);
    }

    /**
     * 设置两层图片的透明度达到切换的效果
     *
     * @param alpha 透明度1~0；
     */
    public void setIconAlpha(float alpha) {
        mTopIconView.setAlpha(alpha);
        mBottomIconView.setAlpha(1 - alpha);
        this.mAlpha = alpha;
    }

    /**
     * 设置底层图标的背景图
     *
     * @param drawable 背景图
     */
    @SuppressLint("NewApi")
    public void setBottomIconView(Drawable drawable) {
        mBottomIconView.setBackground(drawable);
    }

    /**
     * 设置top图标的背景图
     *
     * @param drawable 背景图
     */
    @SuppressLint("NewApi")
    public void setTopIconView(Drawable drawable) {
        mTopIconView.setBackground(drawable);
    }

    /**
     * 非正常状态下退出该view时保存状态
     *
     * @return Parcelable
     */
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());
        bundle.putFloat(STATE_ALPHA, mAlpha);
        return bundle;
    }

    /**
     * 恢复到非正常退出前的状态
     *
     * @param state state
     */
    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            mAlpha = bundle.getFloat(STATE_ALPHA);
            super.onRestoreInstanceState(bundle.getBundle(INSTANCE_STATE));
        } else {
            super.onRestoreInstanceState(state);
        }
    }
}

其中自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="top_icon" format="reference"/>
    <attr name="bottom_icon" format="reference"/>
    <declare-styleable name="GradientIconView">
        <attr name="top_icon"/>
        <attr name="bottom_icon"/>
    </declare-styleable>

    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />
    <attr name="top_text_color" format="color" />
    <attr name="bottom_text_color" format="color" />

    <declare-styleable name="GradientTextView">
        <attr name="text" />
        <attr name="text_size" />
        <attr name="top_text_color" />
        <attr name="bottom_text_color" />
    </declare-styleable>

</resources>

然后定义三个Fragment：

如：

/**
 * 关于我界面
 */
public class Fragment1 extends Fragment {
    public static Fragment1 newInstance(String param1, String param2) {
        Fragment1 fragment = new Fragment1();
        return fragment;
    }
    public Fragment1() {
        // Required empty public constructor
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_about_me, container, false);

        return view;
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }
    @Override
    public void onDetach() {
        super.onDetach();
    }
}

接下来就是主界面了：

/**
 * MainActivity
 */
public class MainActivity extends AppCompatActivity {
    //Fragment列表
    // private List<Fragment> mTabs = new ArrayList<>();
    private Fragment1 mFragment1;
    private Fragment2 mFragment2;
    private Fragment3 mFragment3;
    //切换图标列表
    private List<GradientIconView> mIconViewList = new ArrayList<>();
    private GradientIconView mChatIconView;
    private GradientIconView mContactsIconView;
    private GradientIconView mMeIconView;
    //切换文本列表
    private List<GradientTextView> mTextViewList = new ArrayList<>();
    private GradientTextView mChatTextView;
    private GradientTextView mContactsTextView;
    private GradientTextView mMeTextView;
    /**
     * 用于对Fragment进行管理
     */
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        fragmentManager = getSupportFragmentManager();
        setTabSelection(0);
    }

    /**
     * 初始化视图
     */
    private void initViews() {
        //底部菜单栏
        mChatIconView = (GradientIconView) findViewById(R.id.icon_calendar);
        mChatIconView.setIconAlpha(1.0f);
        mIconViewList.add(mChatIconView);

        mContactsIconView = (GradientIconView) findViewById(R.id.icon_events);
        mIconViewList.add(mContactsIconView);

        mMeIconView = (GradientIconView) findViewById(R.id.icon_aboutMe);
        mIconViewList.add(mMeIconView);

        mChatTextView = (GradientTextView) findViewById(R.id.tv_calendar);
        mChatTextView.setTextViewAlpha(1.0f);
        mTextViewList.add(mChatTextView);
        mContactsTextView = (GradientTextView) findViewById(R.id.tv_events);
        mTextViewList.add(mContactsTextView);
        mMeTextView = (GradientTextView) findViewById(R.id.tv_aboutMe);
        mTextViewList.add(mMeTextView);
    }

    /**
     * 添加视图点击事件监听
     *
     * @param view 视图
     */
    public void onClick(View view) {
        // resetOtherTabs();
        switch (view.getId()) {
            case R.id.ll_chats:
                setTabSelection(0);
                break;
            case R.id.ll_contracts:
                setTabSelection(1);
                break;
            case R.id.ll_aboutMe:
                setTabSelection(2);
                break;
        }
    }

    /**
     * 根据传入的index参数来设置选中的tab页。
     *
     * @param index 每个tab页对应的下标。0表示日历，1表示记事，2表示我
     */
    private void setTabSelection(int index) {
        //清除所有状态
        resetOtherTabs();
        //根据所选项设置状态
        mIconViewList.get(index).setIconAlpha(1.0f);
        mTextViewList.get(index).setTextViewAlpha(1.0f);
        // 开启一个Fragment事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
        hideFragments(transaction);
        switch (index) {
            case 0:
                if (mFragment1 == null) {
                    // 如果MessageFragment为空，则创建一个并添加到界面上
                    mFragment1 = Fragment1.newInstance("", "");
                    transaction.add(R.id.main_fl_content, mFragment1);
                } else {
                    // 如果MessageFragment不为空，则直接将它显示出来
                    transaction.show(mFragment1);
                }
                break;
            case 1:
                if (mFragment2 == null) {
                    // 如果ContactsFragment为空，则创建一个并添加到界面上
                    mFragment2 = Fragment2.newInstance("", "");
                    transaction.add(R.id.main_fl_content, mFragment2);
                } else {
                    // 如果ContactsFragment不为空，则直接将它显示出来
                    transaction.show(mFragment2);
                }
                break;
            case 2:
                if (mFragment3 == null) {
                    // 如果NewsFragment为空，则创建一个并添加到界面上
                    mFragment3 = Fragment3.newInstance("", "");
                    transaction.add(R.id.main_fl_content, mFragment3);
                } else {
                    // 如果NewsFragment不为空，则直接将它显示出来
                    transaction.show(mFragment3);
                }
                break;
        }
        transaction.commit();
    }

    /**
     * 重置其他的Tab icon
     */
    private void resetOtherTabIcons() {
        for (int i = 0; i < mIconViewList.size(); i++) {
            mIconViewList.get(i).setIconAlpha(0);
        }
    }

    /**
     * 重置其他的Tab text
     */
    private void resetOtherTabText() {
        for (int i = 0; i < mTextViewList.size(); i++) {
            mTextViewList.get(i).setTextViewAlpha(0);
        }
    }

    /**
     * 重置其他的Tab
     */
    private void resetOtherTabs() {
        resetOtherTabIcons();
        resetOtherTabText();
    }

    /**
     * 将所有的Fragment都置为隐藏状态。
     *
     * @param transaction 用于对Fragment执行操作的事务
     */
    private void hideFragments(FragmentTransaction transaction) {
        if (mFragment1 != null) {
            transaction.hide(mFragment1);
        }
        if (mFragment2 != null) {
            transaction.hide(mFragment2);
        }
        if (mFragment3 != null) {
            transaction.hide(mFragment3);
        }
    }

最后效果图：

防止fragment被非正常回收，重复创建产生重叠效果的：

/**
     * 当前activity显示的碎片，判断当前要显示的碎片对象是否为空，
     * 防止碎片对象已存在，重复创建！
     *
     * @param fragment 当前activity显示的碎片
     */
    @Override
    public void onAttachFragment(Fragment fragment) {
        super.onAttachFragment(fragment);
        if (mFragment1 == null && fragment instanceof Fragment1) {
            mFragment1 = (Fragment1) fragment;
        } else if (mFragment2 == null && fragment instanceof Fragment2) {
            mFragment2 = (Fragment2) fragment;
        } else if (mFragment3 == null && fragment instanceof Fragment3) {
            mFragment3 = (Fragment3) fragment;
        }
    }