RadioGroup+Fragment 實現簡單選項卡切換
阿新 • • 發佈:2019-02-20
開發過程中,類似新浪,淘寶,實現底部選項卡簡單切換,簡單的瞭解下。
1.首先是 XML style drawable
1.首先是 Main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@id/fragment" android:layout_height="match_parent" android:layout_width="match_parent" android:background="@color/white" android:layout_weight="1"> </FrameLayout> <RadioGroup android:id="@id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioButton style="@style/MTabStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="首頁" android:checked="true" android:drawableTop="@drawable/ic_home" android:id="@id/tab_one" /> <RadioButton style="@style/MTabStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="附近運力" android:drawableTop="@drawable/ic_yunli" android:id="@id/tab_two" /> <RadioButton style="@style/MTabStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="末端網點" android:drawableTop="@drawable/ic_nearby" android:id="@id/tab_three" /> <RadioButton style="@style/MTabStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="個人中心" android:drawableTop="@drawable/ic_info" android:id="@id/tab_four" /> </RadioGroup> </LinearLayout>
</pre><pre>
<style name="MTabStyle"> <item name="android:button">@null</item> <item name="android:gravity">center</item> <item name="android:layout_weight">1</item> <item name="android:textSize">14sp</item> <item name="android:minHeight">48dp</item> <item name="android:drawablePadding">1dp</item> <item name="android:paddingTop">5dp</item> <item name="android:paddingBottom">5dp</item> <item name="android:textColor">@android:color/white</item> <item name="android:background">@drawable/btn_main_tab_selector</item> </style>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@color/main_tab_bg_c" /> <item android:state_selected="true" android:drawable="@color/main_tab_bg_c" /> <item android:drawable="@color/main_tab_bg" /> </selector>
2.MainActivity。 replace實現替換,當然也可以使用show,hide等,看開發者個人愛好。
public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener{
private static final int RESULT_LOGIN = 1;
@ViewInject(R.id.radioGroup)
RadioGroup radioGroup;
Fragment fragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(1);
setContentView(R.layout.main);
ViewUtils.inject(this);
radioGroup.setOnCheckedChangeListener(this);
fragment = getSupportFragmentManager().findFragmentById(R.id.fragment);
if (fragment == null) {
fragment = WaggonFragment.newInstance();
getSupportFragmentManager().beginTransaction().add(R.id.fragment, HomeFragment.newInstance()).commit();
}
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i){
case R.id.tab_one:{
fragment = ContentFragment.newInstance();
}
break;
case R.id.tab_two:{
fragment = ContentFragment.newInstance();
}
break;
case R.id.tab_three:{
fragment = ContentFragment.newInstance();
}
break;
case R.id.tab_four:{
fragment = ContentFragment.newInstance();
}
break;
}
if(fragment != null){
getSupportFragmentManager().beginTransaction().replace(R.id.fragment, fragment).commit();
}
}
}
3. ContentFragment,裡面佈局 main_content自己隨意寫個。
public class ContentFragment extends Fragment {
public static Fragment newInstance() {
ContentFragment f = new ContentFragment();
return f;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.main_content, container, false);
ViewUtils.inject(this, v);
return v;
}
}
以後只是實現選項卡簡單的切換。如果實現動畫,或者滑動,重寫Fragment實現想要的功能即可。