天天看点
返回

安卓APP常用界面切换RadioButton+fragment

   时隔多日，上次CSDN把我的草稿吞了后，一直筹划自己的网站写blog，但是各种原因，最终搁浅。

今天带来的是，界面切换RadioButton+fragment，类似QQ、淘宝、微信之类的主页界面切换。而且考虑到各种原因，可能不会太深入的剖析。

首先，我们新建一个项目，会直接生成一个ACTIVITY+layout。这时候我们无需做出任何改变，先删除菜单功能。添加双击返回键退出程序，代码如下：

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.KeyEvent;
import android.view.Window;
import android.widget.Toast;


public class MainActivity extends FragmentActivity {
    private long exitTime = 0;  //退出时间标记
    public String HOMEFRAGEMENT = "homefragement";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initFragment();
    }

    /**
     * 填充布局
     */
    private void initFragment() {
        //获取窗体碎片管理器
        FragmentManager fm = getSupportFragmentManager();
        //启动窗体碎片事务
        FragmentTransaction transaction = fm.beginTransaction();
        //设定Fragment窗体的交换，拿到Acitivity的Fragment布局的ID，后面跟上我们要添加的主页切换的布局，最后的时我们设定的标记
        transaction.replace(R.id.activityMain, new HomeFragment(), HOMEFRAGEMENT);
        //提交事务
        transaction.commit();
    }

    /**
     * 双击返回键退出程序
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK
                && event.getAction() == KeyEvent.ACTION_DOWN) {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次返回键退出程序！！！",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
//                此处加入退出程序代码
                finish();
                System.exit(0);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

上面代码中，值得一提的时，我们在Activity中，设定的布局一定要是FragmentLayout，而且我们的Activity一定要继承FramentActivity。布局代码如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activityMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</FrameLayout>

既然我们已经设定好主界面，并且可以看到在我的主界面中，已经添加好了布局填充的方法，这个时候我们只需要按部就班的，设定便可以了！

思路：设定baseFragment→设定主页FragmentActivity（添加ViewPager（设定baseViewPager→设定每个切换页（继承自baseViewPager）））

baseFragment如下：

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * baseFragment 所有Activity的基类，子类通过使用initViews方法来加载布局
 * Created by Acheng on 15/9/15.
 */
public abstract class BaseFragment extends Fragment {

    protected FragmentActivity mActivity;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mActivity = getActivity();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return initViews();
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initData();
    }

    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }


    /**
     * 抽象方法，子类必须实现的创建View对象
     * @return
     */
    public abstract View initViews();

    /**
     * 初始化数据，子类可不必实现
     */
    public void initData(){}
}

按照思路，现在我们应当设定FragmentActivity：

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;

import com.acheng.activityfragment.base.BaseFragment;
import com.acheng.activityfragment.base.BasePager;
import com.acheng.activityfragment.concretelypager.ActivityPager;
import com.acheng.activityfragment.concretelypager.MainCityPager;
import com.acheng.activityfragment.concretelypager.ManorsPager;
import com.acheng.activityfragment.concretelypager.SetsPager;
import com.acheng.activityfragment.concretelypager.ShowsPager;
import com.acheng.activityfragment.concretelypager.StoryPager;

import java.util.ArrayList;

/**
 * Created by pang-pc on 15/9/15.
 */
public class HomeFragment extends BaseFragment {
    private RadioGroup radioGroup;
    private android.support.v4.view.ViewPager mViewPager;
    private ArrayList<BasePager> mViewPagerArrayList;
    private M_ViewPager_Adapter mViewPagerAdapter;

    @Override
    public View initViews() {
        View view = View.inflate(mActivity, R.layout.activity_home, null);
        radioGroup = (RadioGroup) view.findViewById(R.id.radioGroup);
        mViewPager = (ViewPager) view.findViewById(R.id.mViewPager);
        return view;
    }

    @Override
    public void initData() {
        mViewPagerArrayList = new ArrayList<BasePager>();

        //添加主界面Fragment进入布局文件中
        {
            mViewPagerArrayList.add(new MainCityPager(mActivity));
            mViewPagerArrayList.add(new ActivityPager(mActivity));
            mViewPagerArrayList.add(new ShowsPager(mActivity));
            mViewPagerArrayList.add(new ManorsPager(mActivity));
            mViewPagerArrayList.add(new StoryPager(mActivity));
            mViewPagerArrayList.add(new SetsPager(mActivity));
        }
        //设定主页面布局
        mViewPagerAdapter = new M_ViewPager_Adapter();
        mViewPager.setAdapter(mViewPagerAdapter);

        radioGroup.check(R.id.maincity);    //设定进入界面标记的底部按钮
        mViewPagerArrayList.get(0).initData();  //根据被选择的页面加载对应的数据，降低数据消耗


        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.maincity:
                        mViewPager.setCurrentItem(0, false);    //根据点击主页面线面导航栏按钮设定页面跳转
                        mViewPagerArrayList.get(0).initData();  //根据被选择的页面加载对应的数据，降低数据消耗
                        break;
                    case R.id.activities:
                        mViewPager.setCurrentItem(1, false);
                        mViewPagerArrayList.get(1).initData();
                        break;
                    case R.id.shows:
                        mViewPager.setCurrentItem(2, false);
                        mViewPagerArrayList.get(2).initData();
                        break;
                    case R.id.manors:
                        mViewPager.setCurrentItem(3, false);
                        mViewPagerArrayList.get(3).initData();
                        break;
                    case R.id.stroy:
                        mViewPager.setCurrentItem(4, false);
                        mViewPagerArrayList.get(4).initData();
                        break;
                    case R.id.sets:
                        mViewPager.setCurrentItem(5, false);
                        mViewPagerArrayList.get(5).initData();
                        break;
                    default:
                        break;
                }
            }
        });


    }
<span style="white-space:pre">	</span>//ViewPager的适配器
    class M_ViewPager_Adapter extends PagerAdapter {
        /**
         * Return the number of views available.
         */
        @Override
        public int getCount() {
            return mViewPagerArrayList.size();
        }

        /**
         * 决定一个viewpage是不是一个从ViewGroup返回的关联的view
         *
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        /**
         * 初始化viewpager,get the view from ViewGroup who has some views.
         *
         * @param container
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewPagerArrayList.get(position).mRootView); //根据我们的basepager获取设定好的布局
            return mViewPagerArrayList.get(position).mRootView;
        }

        /**
         * 销毁Viewpager，根据切换后的界面来销毁
         *
         * @param container
         * @param position
         * @param object
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

我们一步一步按照思路进行，设定好Fragment后，我们需要的是有自己的Viewpager并把它们添加到Fragment中，这时候，我们的BaseViewPager出现了：

import android.app.Activity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.acheng.activityfragment.R;

public class BasePager {
    protected final Activity mActivity;
    public View mRootView;
    public FrameLayout baseFramlayout;
    public TextView top_bar_title;
    public BasePager(Activity activity) {
        mActivity = activity;<span style="white-space:pre">	</span>//这个时候，其实我们的基础布局已经加载好了，只需要把我们复杂的布局添加进来即可，故此处有activity对象
        initViews();
    }

    /**
     * 布局设定，子类可覆盖修改界面布局，子类覆盖时，请删除（super.initViews();）
     * @note 注意界面布局文件加载
     */
    public void initViews() {
        mRootView = View.inflate(mActivity, R.layout.base_pager, null);
        baseFramlayout = (FrameLayout) mRootView.findViewById(R.id.baseFramlayout);
        top_bar_title = (TextView) mRootView.findViewById(R.id.top_bar_title);
    }

    /**
     * 界面数据加载。子类可修改，可不修改
     */
    public void initData(){}


}

既然，我们这里要加载我们的布局，那么这时候布局文件也是必不可少的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FEA40A">

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:padding="5dp"
        android:textSize="18sp"
        android:textColor="#DBDBDB"
        android:text="退出"/>

        <TextView
            android:id="@+id/top_bar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textSize="18sp"
            android:textColor="#DBDBDB"
            android:layout_alignParentTop="true"
            android:text="标题"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/baseFramlayout"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#474747">

    </FrameLayout>
</LinearLayout>

现在，我们的baseViewPager已经设定好，这时候，我们只需把我们的详细的ViewPager添加进去，即可：

import android.app.Activity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

import com.acheng.activityfragment.R;
import com.acheng.activityfragment.base.BasePager;

/**
 * Created by pang-pc on 15/9/16.
 */
public class MainCityPager extends BasePager {

    private TextView top_bar_title;

    public MainCityPager(Activity activity) {
        super(activity);
    }

    @Override
    public void initViews() {
        mRootView = View.inflate(mActivity, R.layout.mancitylayout,null);
        top_bar_title = (TextView) mRootView.findViewById(R.id.top_bar_title);
    }

    @Override
    public void initData() {
        Log.i("检查程序什么时候创建fragment", "这个时候创建了，但是创建几次呢？");
        top_bar_title.setText("主城");
    }
}

布局文件如下：

<?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:id="@+id/main_city_layout">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FEA40A">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="5dp"
            android:textSize="18sp"
            android:textColor="#DBDBDB"
            android:text="退出"/>

        <TextView
            android:id="@+id/top_bar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textSize="18sp"
            android:textColor="#DBDBDB"
            android:layout_alignParentTop="true"
            android:text="标题"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New RadioButton"
        android:id="@+id/radioButton" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New RadioButton"
        android:id="@+id/radioButton2"
        android:layout_gravity="center_vertical" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_gravity="center_horizontal" />

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Switch"
        android:id="@+id/switch1"
        android:layout_gravity="center_horizontal" />

    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ratingBar"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

剩下的几个ViewPager，也是类似的，只需要我们重写initViews方法即可，这里不再叙述。

由于时间匆忙来不及说明，粗浅之处，望大家海涵，如有需要，请大家下载我上传的文件，在其中可以看到，由于csdn资源审核问题，这里来不及贴出连接。

（从今天起，我上传的安卓项目都是使用Android Studio，不便之处，大家自己修改）

完成效果如图：

安卓APP常用界面切换RadioButton+fragment
安卓APP常用界面切换RadioButton+fragment
安卓APP常用界面切换RadioButton+fragment

文章排版很乱，望大家理解。

安卓开发学习--细节 安卓开发总结
上一篇: Qt 读取excel
下一篇: Qt 使用 kdChart 自定义甘特图

继续阅读