Android主界面实现方式

来源:互联网 发布:校园网禁止共享网络 编辑:程序博客网 时间:2024/05/24 06:58

做个笔记,有错误的地方请指点!微笑

有两种类型主界面页的切换:

第一种是FragmentTransaction和Fragment;

第二种是ViewPager和FragmentPagerAdapter;

效果差不多,都可以点击切换,但第二种可以左右滑动切换,


第一种FragmentTransaction和Fragment实现:

效果图:


act_tab1.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="match_parent"    android:background="#abcabc"    android:orientation="vertical">    <FrameLayout        android:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1">    </FrameLayout>    <LinearLayout        android:id="@+id/bottomPanel"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="#FFFFFF"        android:orientation="horizontal">        <LinearLayout            android:id="@+id/ll_home"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_home"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/home_selected" />            <TextView                android:id="@+id/tv_home"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="首页"                android:textColor="#ff7700" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_live"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_live"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/live_selector" />            <TextView                android:id="@+id/tv_live"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="直播"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_follow"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_follow"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/follow_selector" />            <TextView                android:id="@+id/tv_follow"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="关注"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_discover"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_discover"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/discover_selector" />            <TextView                android:id="@+id/tv_discover"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="发现"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_user"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_user"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/user_selector" />            <TextView                android:id="@+id/tv_user"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="我的"                android:textColor="#aaaaaa" />        </LinearLayout>    </LinearLayout></LinearLayout>
Act_tab1.java文件代码
package com.rrt.tabs;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.view.Window;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;/** * Created by LI on 2017/2/10. */public class Act_tab1 extends FragmentActivity implements View.OnClickListener{    private LinearLayout mLlHome, mLlLive, mLlFollow, mLlDiscover, mLlUser;    private ImageView mIvHome, mIvLive, mIvFollow, mIvDiscover, mIvUser;    private TextView mTvHome, mTvLive, mTvFollow, mTvDiscover, mTvUser;    private FragmentManager mFragmentManager;    private HomeFragment mHomeFragment;    private LiveFragment mLiveFragment;    private FollowFragment mFollowFragment;    private DiscoverFragment mDiscoverFragment;    private UserFragment mUserFragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.act_tab1);        initView();        initEvent();    }    public void initView() {        mLlHome = (LinearLayout) findViewById(R.id.ll_home);        mLlLive = (LinearLayout) findViewById(R.id.ll_live);        mLlFollow = (LinearLayout) findViewById(R.id.ll_follow);        mLlDiscover = (LinearLayout) findViewById(R.id.ll_discover);        mLlUser = (LinearLayout) findViewById(R.id.ll_user);        mIvHome = (ImageView) findViewById(R.id.iv_home);        mIvLive = (ImageView) findViewById(R.id.iv_live);        mIvFollow = (ImageView) findViewById(R.id.iv_follow);        mIvDiscover = (ImageView) findViewById(R.id.iv_discover);        mIvUser = (ImageView) findViewById(R.id.iv_user);        mTvHome = (TextView) findViewById(R.id.tv_home);        mTvLive = (TextView) findViewById(R.id.tv_live);        mTvFollow = (TextView) findViewById(R.id.tv_follow);        mTvDiscover = (TextView) findViewById(R.id.tv_discover);        mTvUser = (TextView) findViewById(R.id.tv_user);    }    public void initEvent() {        mLlHome.setOnClickListener(this);        mLlLive.setOnClickListener(this);        mLlFollow.setOnClickListener(this);        mLlDiscover.setOnClickListener(this);        mLlUser.setOnClickListener(this);        /**使用v4包用getSupportFragmentManager,3.0版本后android支持Fragment,用getFragmentManager获取*/        mFragmentManager = getSupportFragmentManager();        setContentTab(0);    }    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.ll_home:                chooseBottomView(0);                setContentTab(0);                break;            case R.id.ll_live:                chooseBottomView(1);                setContentTab(1);                break;            case R.id.ll_follow:                chooseBottomView(2);                setContentTab(2);                break;            case R.id.ll_discover:                chooseBottomView(3);                setContentTab(3);                break;            case R.id.ll_user:                chooseBottomView(4);                setContentTab(4);                break;        }    }    public void setContentTab(int position) {        FragmentTransaction ft = mFragmentManager.beginTransaction();        hideAllTab(ft);        switch (position) {            case 0:                if (mHomeFragment == null) {                    mHomeFragment = new HomeFragment();                    ft.add(R.id.container, mHomeFragment);                } else {                    ft.show(mHomeFragment);                }                break;            case 1:                if (mLiveFragment == null) {                    mLiveFragment = new LiveFragment();                    ft.add(R.id.container, mLiveFragment);                } else {                    ft.show(mLiveFragment);                }                break;            case 2:                if (mFollowFragment == null) {                    mFollowFragment = new FollowFragment();                    ft.add(R.id.container, mFollowFragment);                } else {                    ft.show(mFollowFragment);                }                break;            case 3:                if (mDiscoverFragment == null) {                    mDiscoverFragment = new DiscoverFragment();                    ft.add(R.id.container, mDiscoverFragment);                } else {                    ft.show(mDiscoverFragment);                }                break;            case 4:                if (mUserFragment == null) {                    mUserFragment = new UserFragment();                    ft.add(R.id.container, mUserFragment);                } else {                    ft.show(mUserFragment);                }                break;        }        ft.commit();    }    public void hideAllTab(FragmentTransaction tf) {        if (mHomeFragment != null) {            tf.hide(mHomeFragment);        }        if (mLiveFragment != null) {            tf.hide(mLiveFragment);        }        if (mFollowFragment != null) {            tf.hide(mFollowFragment);        }        if (mDiscoverFragment != null) {            tf.hide(mDiscoverFragment);        }        if (mUserFragment != null) {            tf.hide(mUserFragment);        }    }    public void resetBottomView() {        mIvHome.setImageResource(R.drawable.home_selector);        mIvLive.setImageResource(R.drawable.live_selector);        mIvFollow.setImageResource(R.drawable.follow_selector);        mIvDiscover.setImageResource(R.drawable.discover_selector);        mIvUser.setImageResource(R.drawable.user_selector);        mTvHome.setTextColor(Color.parseColor("#aaaaaa"));        mTvLive.setTextColor(Color.parseColor("#aaaaaa"));        mTvFollow.setTextColor(Color.parseColor("#aaaaaa"));        mTvDiscover.setTextColor(Color.parseColor("#aaaaaa"));        mTvUser.setTextColor(Color.parseColor("#aaaaaa"));    }    public void chooseBottomView(int position) {        resetBottomView();        switch (position) {            case 0:                mIvHome.setImageResource(R.drawable.home_selected);                mTvHome.setTextColor(Color.parseColor("#FF7700"));                break;            case 1:                mIvLive.setImageResource(R.drawable.live_selected);                mTvLive.setTextColor(Color.parseColor("#FF7700"));                break;            case 2:                mIvFollow.setImageResource(R.drawable.follow_selected);                mTvFollow.setTextColor(Color.parseColor("#FF7700"));                break;            case 3:                mIvDiscover.setImageResource(R.drawable.discover_selected);                mTvDiscover.setTextColor(Color.parseColor("#FF7700"));                break;            case 4:                mIvUser.setImageResource(R.drawable.user_selected);                mTvUser.setTextColor(Color.parseColor("#FF7700"));                break;        }    }}
HomeFragment.java
public class HomeFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, null);        return view;    }}

第二种ViewPager与FragmentPagerAdapter实现

效果图:


act_tab2.xml和act1_tab1.xml差不多,只不过把FrameLayout组件换成了ViewPager

<?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">    <android.support.v4.view.ViewPager        android:id="@+id/viewpage"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1">    </android.support.v4.view.ViewPager>    <LinearLayout        android:id="@+id/bottomPanel"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="#FFFFFF"        android:orientation="horizontal">        <LinearLayout            android:id="@+id/ll_home"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_home"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/home_selected" />            <TextView                android:id="@+id/tv_home"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="首页"                android:textColor="#ff7700" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_live"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_live"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/live_selector" />            <TextView                android:id="@+id/tv_live"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="直播"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_follow"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_follow"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/follow_selector" />            <TextView                android:id="@+id/tv_follow"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="关注"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_discover"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_discover"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/discover_selector" />            <TextView                android:id="@+id/tv_discover"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="发现"                android:textColor="#aaaaaa" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_user"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/iv_user"                android:layout_width="26dp"                android:layout_height="26dp"                android:src="@drawable/user_selector" />            <TextView                android:id="@+id/tv_user"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="我的"                android:textColor="#aaaaaa" />        </LinearLayout>    </LinearLayout></LinearLayout>
Act_tab2.java代码
package com.rrt.tabs;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;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.view.View;import android.view.Window;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;/** * Created by LI on 2017/2/10. */public class Act_tab2 extends FragmentActivity implements View.OnClickListener{    private LinearLayout mLlHome, mLlLive, mLlFollow, mLlDiscover, mLlUser;    private ImageView mIvHome, mIvLive, mIvFollow, mIvDiscover, mIvUser;    private TextView mTvHome, mTvLive, mTvFollow, mTvDiscover, mTvUser;    private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.act_tab2);        initView();        initEvent();    }    public void initView() {        mLlHome = (LinearLayout) findViewById(R.id.ll_home);        mLlLive = (LinearLayout) findViewById(R.id.ll_live);        mLlFollow = (LinearLayout) findViewById(R.id.ll_follow);        mLlDiscover = (LinearLayout) findViewById(R.id.ll_discover);        mLlUser = (LinearLayout) findViewById(R.id.ll_user);        mIvHome = (ImageView) findViewById(R.id.iv_home);        mIvLive = (ImageView) findViewById(R.id.iv_live);        mIvFollow = (ImageView) findViewById(R.id.iv_follow);        mIvDiscover = (ImageView) findViewById(R.id.iv_discover);        mIvUser = (ImageView) findViewById(R.id.iv_user);        mTvHome = (TextView) findViewById(R.id.tv_home);        mTvLive = (TextView) findViewById(R.id.tv_live);        mTvFollow = (TextView) findViewById(R.id.tv_follow);        mTvDiscover = (TextView) findViewById(R.id.tv_discover);        mTvUser = (TextView) findViewById(R.id.tv_user);        mViewPager = (ViewPager) findViewById(R.id.viewpage);    }    public void initEvent() {        mLlHome.setOnClickListener(this);        mLlLive.setOnClickListener(this);        mLlFollow.setOnClickListener(this);        mLlDiscover.setOnClickListener(this);        mLlUser.setOnClickListener(this);        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int position) {                switch (position) {                    case 0:                        return new HomeFragment();                    case 1:                        return new LiveFragment();                    case 2:                        return new FollowFragment();                    case 3:                        return new DiscoverFragment();                    case 4:                        return new UserFragment();                }                return null;            }            @Override            public int getCount() {                return 5;            }            @Override            public CharSequence getPageTitle(int position) {                return "标题" + position;            }        });        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                chooseBottomView(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.ll_home:                mViewPager.setCurrentItem(0, false);                chooseBottomView(0);                break;            case R.id.ll_live:                mViewPager.setCurrentItem(1, false);                chooseBottomView(1);                break;            case R.id.ll_follow:                mViewPager.setCurrentItem(2, false);                chooseBottomView(2);                break;            case R.id.ll_discover:                mViewPager.setCurrentItem(3, false);                chooseBottomView(3);                break;            case R.id.ll_user:                mViewPager.setCurrentItem(4, false);                chooseBottomView(4);                break;        }    }    public void resetBottomView() {        mIvHome.setImageResource(R.drawable.home_selector);        mIvLive.setImageResource(R.drawable.live_selector);        mIvFollow.setImageResource(R.drawable.follow_selector);        mIvDiscover.setImageResource(R.drawable.discover_selector);        mIvUser.setImageResource(R.drawable.user_selector);        mTvHome.setTextColor(Color.parseColor("#aaaaaa"));        mTvLive.setTextColor(Color.parseColor("#aaaaaa"));        mTvFollow.setTextColor(Color.parseColor("#aaaaaa"));        mTvDiscover.setTextColor(Color.parseColor("#aaaaaa"));        mTvUser.setTextColor(Color.parseColor("#aaaaaa"));    }    public void chooseBottomView(int position) {        resetBottomView();        switch (position) {            case 0:                mIvHome.setImageResource(R.drawable.home_selected);                mTvHome.setTextColor(Color.parseColor("#FF7700"));                break;            case 1:                mIvLive.setImageResource(R.drawable.live_selected);                mTvLive.setTextColor(Color.parseColor("#FF7700"));                break;            case 2:                mIvFollow.setImageResource(R.drawable.follow_selected);                mTvFollow.setTextColor(Color.parseColor("#FF7700"));                break;            case 3:                mIvDiscover.setImageResource(R.drawable.discover_selected);                mTvDiscover.setTextColor(Color.parseColor("#FF7700"));                break;            case 4:                mIvUser.setImageResource(R.drawable.user_selected);                mTvUser.setTextColor(Color.parseColor("#FF7700"));                break;        }    }}
                                             
0 0