RadioButton+Fragment实现简单主页面布局

时间:2021-05-29 06:26:47

RadioButton+Fragment实现简单主页面布局

实现主页面布局的方法有不少,很常见的有ViwePager+Fragment,还有TabHost等等,这里因为主页面不需要滑动,也可以用RadioButton+Fragment实现简单的主页布局。为了区分每个页面的不同,随便添加了几个控件,先上效果图:

RadioButton+Fragment实现简单主页面布局


主页面就是一个Framlayout+RadioGroup,通过点击下边的按钮,切换Fragment。代码非常简单,下面贴出来:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.gechao.materialtabsdemo.MainActivity">

<FrameLayout
android:id="@+id/fm"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>

<RadioGroup
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#0099FF"
android:gravity="center_vertical"
android:orientation="horizontal">

<RadioButton
android:id="@+id/btn1"
style="@style/HomeButtonStyle"
android:text="主页" />

<RadioButton
android:id="@+id/btn2"
style="@style/HomeButtonStyle"
android:text="动态" />

<RadioButton
android:id="@+id/btn3"
style="@style/HomeButtonStyle"
android:text="联系人" />

<RadioButton
android:id="@+id/btn4"
style="@style/HomeButtonStyle"
android:text="自己" />
</RadioGroup>
</LinearLayout>
接下来就是写其他几个界面的布局,这里就不贴出来,根据自己的需要写布局。

然后见四个Fragment,每个fragment加载不同的界面,在主界面进行切换:

package com.gechao.materialtabsdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.RadioButton;

import com.gechao.materialtabsdemo.fragment.FirstFragment;
import com.gechao.materialtabsdemo.fragment.FourthFragment;
import com.gechao.materialtabsdemo.fragment.SecondFragment;
import com.gechao.materialtabsdemo.fragment.ThirdFragment;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initUI();
}

private void initUI() {
setContentView(R.layout.activity_main);
RadioButton rb1 = (RadioButton) findViewById(R.id.btn1);
RadioButton rb2 = (RadioButton) findViewById(R.id.btn2);
RadioButton rb3 = (RadioButton) findViewById(R.id.btn3);
RadioButton rb4 = (RadioButton) findViewById(R.id.btn4);

rb1.setOnClickListener(this);
rb2.setOnClickListener(this);
rb3.setOnClickListener(this);
rb4.setOnClickListener(this);

changeFragment(new FirstFragment());
}

private void changeFragment(Fragment fm) {
FragmentManager supportFragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = supportFragmentManager.beginTransaction();
transaction.replace(R.id.fm, fm);
transaction.commit();
}


@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn1:
changeFragment(new FirstFragment());
break;
case R.id.btn2:
changeFragment(new SecondFragment());
break;
case R.id.btn3:
changeFragment(new ThirdFragment());
break;
case R.id.btn4:
changeFragment(new FourthFragment());
break;
default:
break;
}

}
}
由于对Tabhost用的不多,不太熟悉,这里贴出代码供以后学习使用(其实在android Studio中已经可以拖拽了):

<?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">


<TabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是第一个tab" />
</LinearLayout>

<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是第二个tab" />
</LinearLayout>

<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是第三个tab" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
在fragment中代码实现:

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=View.inflate(getActivity(), R.layout.fragment_two, null);
TabHost m = (TabHost)view.findViewById(R.id.tabhost);
m.setup();
m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.tab1));
m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.tab2));
m.addTab(m.newTabSpec("tab2").setIndicator("标签3").setContent(R.id.tab3));
return view;
}

就这么多。