RadioButton+Fragment实现简单主页面布局
实现主页面布局的方法有不少,很常见的有ViwePager+Fragment,还有TabHost等等,这里因为主页面不需要滑动,也可以用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;由于对Tabhost用的不多,不太熟悉,这里贴出代码供以后学习使用(其实在android Studio中已经可以拖拽了):
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;
}
}
}
<?xml version="1.0" encoding="utf-8"?>在fragment中代码实现:
<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>
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;
}
就这么多。