このセクションの概要:
前のセクションでは、LinearLayout + TextView を使用して、下部ナビゲーション バーの効果を実現しました。クリックするたびに、すべての TextView の状態をリセットし、クリックされた TextView を選択する必要があります。少し面倒です。次に、別の方法、RadioGroup + RadioButton を使用して、前のセクションの効果を実現します。
1. いくつかの考え
このセクションでは、RadioButton を使用してラジオ ボタン効果を実現します。よく知らない場合、または使用したことがない場合は、次のページに移動してください: RadioButton 簡単に言うと、4 つの RadioButton でラップされた RadioGroup であり、前と同じ比率を使用します 。 Divide: 1:1:1:1;
さらに、RadioGroupのonCheckedChangeを書き換えて、どのRadioButtonがクリックされたのかをcheckidで判定するだけです！よし、積み上げを始めよう！
2. 導入プロセス
PS:ここのマテリアルは、前のセクションのマテリアルから直接使用されています。さらに、Drawable クラスのリソースは、選択状態をチェック済みに変更します。
ステップ 1: 下部のオプション用のリソース ファイルを作成する
画像描画リソース: tab_menu_channel.xml
<?xml version="1.0"coding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap /tab_channel_pressed" android:state_checked="true" />
<item android:drawable="@mipmap/tab_channel_normal" />
</selector>
他の3人もそれに続きました！
テキストリソース: tab_menu_text.xml
<?xml version="1.0"coding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color /text_ yellow" android:state_checked="true" />
<item android:color="@color/text_gray" />
</selector>
バックグラウンドリソース: tab_menu_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" >
<shape>
<solid android:color="#FFC4C4C4" />
</shape>
</item>
<item>
<shape>
<solid android:color="@color/transparent" />
</shape>
</アイテム>
</セレクター>
ステップ 2: アクティビティ レイアウトを作成する
TextView を使用して下部のナビゲーション バーを実装するときに問題が見つかりました。各 TextView のプロパティはほぼ同じです。提案では、全員が同じプロパティを抽出して Style に書き込むべきとも言いました。怠惰な友人もいるかもしれません。または、抽出して使用する方法がわからない場合は、次のデモを参照してください。
まず、RadioGroups の 1 つのラベルを取り出します。
<RadioButton
android:id="@+id/rb_channel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:button="@ null"
android:drawableTop="@drawable/tab_menu_channel"
android:gravity="center"
android:paddingTop="3dp"
android:text="@string/tab_menu_alert"
android:textColor="@drawable/tab_menu_text"
android:textSize= "18sp" />
各 RadioButton の同じ属性を抽出して、style.xmlファイルに書き込むことができます。
<style name="tab_menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent< /item>
<item name="android:background">@drawable/tab_menu_bg</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</ item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
<item name="android:textSize">18sp</item>
</スタイル>
その場合、 activity_main.xml 内の RadioButton は毎回同じコードを記述する必要はなく、RadioButton のstyle="@style/tab_menu_item"だけで問題ありません。
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height ="match_parent"
android:background="@color/bg_gray"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/ly_top_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/bg_topbar">
<TextView
android:id="@+id/txt_topbar"
アンドロイド:レイアウト幅 = "親の一致"
android:layout_height = "親の一致"
android:layout_centerInParent="true"
android:gravity="center"
android:text="情報"
android:textColor="@color/text_topbar"
android:textSize="18sp" />
<View
android:layout_width="match_parent"
android :layout_height="2px"
android:layout_alignParentBottom="true"
android:background="@color/div_white" />
</RelativeLayout>
<RadioGroup
android:id="@+id/rg_tab_bar"
android:layout_width="match_parent"
android :レイアウト高さ = "56dp"
android:layout_alignParentBottom = "true"
android:background="@color/bg_white"
android:orientation="horizontal">
android:drawableTop="@drawable/tab_menu_better"
<RadioButton
android:id="@+id/rb_channel"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert" />
<RadioButton
android:id="@+ id/rb_message"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_message"
android:text="@string/tab_menu_profile" />
<RadioButton
android:id="@+id/rb_better"
style=" @style/tab_menu_item"
アンドロイド:text="@string/tab_menu_pay" />
<RadioButton
android:id="@+id/rb_setting"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_setting"
android:text="@string/tab_menu_setting"/>
</RadioGroup>
<View
android:id="@+id/div_tab_bar"
android:layout_width ="match_parent"
android:layout_height="2px"
android:layout_above="@id/rg_tab_bar"
android:background="@color/div_white" />
<FrameLayout
android:id="@+id/ly_content"
android:layout_width= "match_parent"
アンドロイド:layout_height="match_parent"layout_height="match_parent"
android:layout_above="@id/div_tab_bar"
android:layout_below="@id/ly_top_bar"></FrameLayout>
</RelativeLayout>
ステップ 3: 上部のナビゲーション バーを非表示にする
AndroidManifest.xmlにテーマ属性を設定する
android:theme="@style/Theme.AppCompat.NoActionBar"
ステップ 4: 単純なレイアウトとフラグメントのクラスを作成します。
前のセクションのレイアウトとフラグメントを直接コピーします。
fg_content.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"
android:background="@color/bg_white">
<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android :gravity="center"
android:text="呵呵"
android:textColor="@color/text_ yellow"
アンドロイド:textSize="20sp"/>
</LinearLayout>
MyFragment.java:
/**
* 2015/8/29 0028 に Coder-pig によって作成されました。
*/
public class MyFragment extends Fragment {
private String content;
public MyFragment(String content) {
this.content = content;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup コンテナ, Bundle SavedInstanceState) { View view =
inflater.inflate
(R.layout.fg_content,container,false);
TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
txt_content.setText(コンテンツ);
ビューを返す。
}
}
ステップ 5: MainActivity.java を作成する
これは TextView の実装よりもはるかに簡単なので詳細は説明しませんが、非常に簡単で、コードを直接記述するだけです。
MainActivity.java
/**
* 2015/8/29 0028 に Coder-pig によって作成されました。
*/
public class MainActivity extends AppCompatActivityimplements RadioGroup.OnCheckedChangeListener{
private RadioGroup rg_tab_bar;
プライベートラジオボタン rb_channel;
//フラグメントオブジェクト
private MyFragment fg1,fg2,fg3,fg4;
プライベート FragmentManager fManager;
@Override
protected void onCreate(Bundle SavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager = getFragmentManager();
rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
rg_tab_bar.setOnCheckedChangeListener(this);
//最初のラジオ ボタンを取得し、チェック済みとして設定します
rb_channel = (RadioButton) findViewById(R.id.rb_channel);
rb_channel.setChecked(true);
}
@Override
public void onCheckedChanged(RadioGroup group, int CheckedId) {
FragmentTransaction fTransaction = fManager.beginTransaction();
hideAllFragment(fTransaction);
switch (checkedId){
case R.id.rb_channel:
if(fg1 == null){
fg1 = new MyFragment("最初のフラグメント");
fTransaction.add(R.id. ly_content,fg1);
}else{
fTransaction.show(fg1);
}
壊す;
case R.id.rb_message:
if(fg2 == null){
fg2 = new MyFragment("第二フラグメント");
fTransaction.add(R.id.ly_content,fg2);
}else{
fTransaction.show(fg2);
休憩
;
case R.id.rb_better:
if(fg3 == null){
fg3 = new MyFragment("第三个フラグメント");
fTransaction.add(R.id.ly_content,fg3);
}else{
fTransaction.show(fg3);
休憩
;
case R.id.rb_setting:
if(fg4 == null){
fg4 = new MyFragment("第四フラグメント");
fTransaction.add(R.id.ly_content,fg4);
}else{
fTransaction.show(fg4);
休憩
;
fTransaction.commit
();
}
//隐藏すべてFragment
private void HideAllFragment(FragmentTransaction flagmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1);
if(fg2 != null)fragmentTransaction.hide(fg2);
if(fg3 != null)fragmentTransaction.hide(fg3);
if(fg4 != null)fragmentTransaction.hide(fg4);
}
}
PS:前のセクションで書き忘れていました。FragmentTransaction は 1 回しか使用できません。使用するたびに、FragmentManager の beginTransaction() メソッドを呼び出して、FragmentTransaction トランザクション オブジェクトを取得する必要があります。
3. ランニング効果図
実際、前のセクションで得られる効果は同じです。
