APP常见的主界面

来源：互联网发布：linux cmdline 编辑：程序博客网时间：2024/06/01 14:58

1.UI

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <FrameLayout        android:id="@+id/main_content_holder"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:background="#333" >    </FrameLayout>    <FrameLayout        style="@style/AppBottomTabStyle"        android:layout_width="match_parent" >        <RadioGroup            android:id="@+id/main_tab_group"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="horizontal" >            <RadioButton                android:id="@+id/rb_1"                style="@style/BottomTabRadioStyle"                android:drawableTop="@drawable/tab_home_selector"                android:text="@string/home" />            <RadioButton                android:id="@+id/rb_2"                style="@style/BottomTabRadioStyle"                android:drawableTop="@drawable/tab_chat_selector"                android:text="@string/chat" />            <RadioButton                android:id="@+id/rb_3"                style="@style/BottomTabRadioStyle"                android:drawableTop="@drawable/tab_mine_selector"                android:text="@string/mine" />        </RadioGroup>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="horizontal" >            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" >                <View                    android:id="@+id/badge_home_left"                    android:layout_width="1dp"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true" >                </View>                <!-- 这里View的作用只是用来居中，让badge显示在右边 -->                <TextView                    android:id="@+id/badge_home"                    style="@style/BadgeStyle"                    android:layout_alignLeft="@+id/badge_home_left"                    android:layout_marginLeft="14dp"                    android:layout_marginTop="4dp" />            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" >                <View                    android:id="@+id/badge_chat_left"                    android:layout_width="1dp"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true" >                </View>                <TextView                    android:id="@+id/badge_chat"                    style="@style/BadgeStyle"                    android:layout_alignLeft="@+id/badge_chat_left"                    android:layout_marginLeft="14dp"                    android:layout_marginTop="4dp" />            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" >                <View                    android:id="@+id/badge_mine_left"                    android:layout_width="1dp"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true" >                </View>                <TextView                    android:id="@+id/badge_mine"                    style="@style/BadgeStyle"                    android:layout_alignLeft="@+id/badge_mine_left"                    android:layout_marginLeft="14dp"                    android:layout_marginTop="4dp" />            </RelativeLayout>        </LinearLayout>    </FrameLayout></LinearLayout>

Style.xml

...<style name="AppBottomTabStyle">        <item name="android:layout_width">fill_parent</item>        <item name="android:layout_height">46dp</item>    </style>    <style name="BottomTabRadioStyle">        <item name="android:layout_width">0dp</item>        <item name="android:layout_weight">1</item>        <item name="android:layout_height">match_parent</item>        <item name="android:paddingTop">3dp</item>        <item name="android:gravity">center</item>        <item name="android:button">@null</item><!-- 取消按钮圆圈图案 -->    </style>    <style name="BadgeStyle">        <item name="android:text">99+</item>        <item name="android:textSize">11sp</item>        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:padding">3dp</item>        <item name="android:background">@drawable/badge</item>    </style>    ...

tab_home_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true" android:drawable="@drawable/home_hl"></item>    <item android:state_selected="true" android:drawable="@drawable/home_hl"></item>     <item android:state_pressed="true" android:drawable="@drawable/home_hl"></item>     <item android:drawable="@drawable/home"></item></selector>

tab_chat_selector.xml//类似
tab_mine_selector.xml//类似

badge.xml(圆形TextView)

<shape     xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval"    android:useLevel="false" >    <solid android:color="#ff0033" />    <padding         android:left="2dp"         android:top="2dp"         android:right="2dp"         android:bottom="2dp" />    <solid        android:color="#ff0033" />    <stroke        android:width="1dp"        />    <size android:width="15dp"          android:height="15dp" /></shape>

效果：
这里写图片描述

2.具体使用，点击Radio切换Fragment

MainActivity.java

package com.example.test0102;import com.example.test0102.MainTabAdapter.OnTabFragmentShowListener;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.widget.RadioGroup;public class MainActivity extends FragmentActivity implements OnTabFragmentShowListener{    RadioGroup mTabGroup;    MainTabAdapter mTabAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();    }    private void init() {        mTabGroup = (RadioGroup) findViewById(R.id.main_tab_group);        mTabAdapter = new MainTabAdapter(this, R.id.main_content_holder, mTabGroup,                 new Class<?>[] {HomeFragment.class, ChatFragment.class, MineFragment.class});        mTabAdapter.setOnTabFragmentShowListener(this);    }    @Override    public void onTabFragmentShow(Fragment fragment, int index) {    }}

MainTabAdapter.java

package com.example.test0102;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.widget.RadioGroup;public class MainTabAdapter implements RadioGroup.OnCheckedChangeListener{    private FragmentActivity mActivity;    private RadioGroup mRadioGroup;    private int mFragmentHolderId;    private Class<?>[] mFragmentsCls;    private Fragment[] mFragments;    private Fragment mCurrentFragment;    private int mCurrentIndex = -1;    private OnTabFragmentShowListener mListener;    public MainTabAdapter(FragmentActivity activity, int fragmentHolderId, RadioGroup rgs, Class<?>[] clsArray) {        mActivity = activity;        mRadioGroup = rgs;        mFragmentHolderId = fragmentHolderId;        mFragmentsCls = clsArray;        mFragments = new Fragment[clsArray.length];        mRadioGroup.setOnCheckedChangeListener(this);        showTab(0);    }    public Fragment getCurrentFragment() {        return mCurrentFragment;    }    public Fragment[] getFragments() {        return mFragments;    }    public void setOnTabFragmentShowListener(OnTabFragmentShowListener listener) {        this.mListener = listener;    }    private Fragment getFragment(int index) {        Fragment ret = null;        if (index >= 0 && index < mFragments.length) {            ret = mFragments[index];            if (ret == null) {                try {                    ret = (Fragment) mFragmentsCls[index].newInstance();                    mFragments[index] = ret;                } catch (InstantiationException e) {                    e.printStackTrace();                } catch (IllegalAccessException e) {                    e.printStackTrace();                }            }        }        return ret;    }    private void addFragment(Fragment fragment) {        FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();        ft.add(mFragmentHolderId, fragment);        ft.commitAllowingStateLoss();        mCurrentFragment = fragment;    }    private void hideFragment(Fragment fragment) {        if (fragment == null) return;        FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();        ft.hide(fragment);        ft.commitAllowingStateLoss();        mCurrentFragment = null;        fragment.onPause();    }    private void showFragment(Fragment fragment) {        FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();        ft.show(fragment);        ft.commitAllowingStateLoss();        mCurrentFragment = fragment;        fragment.onResume();    }    private void showTab(int index) {        if (index < 0 || index >= mFragments.length || index == mCurrentIndex)            return;        mCurrentIndex = index;        Fragment fragment = getFragment(index);        hideFragment(mCurrentFragment);        if (fragment.isAdded()) {            showFragment(fragment);        } else {            addFragment(fragment);        }        if (mListener != null)            mListener.onTabFragmentShow(mCurrentFragment, mCurrentIndex);    }    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {        for (int i = 0; i < group.getChildCount(); i++) {            if (group.getChildAt(i).getId() == checkedId) {                showTab(i);                break;            }        }    }    public interface OnTabFragmentShowListener {        public void onTabFragmentShow(Fragment fragment, int index);    }}

0 0