このセクションの概要
下部ナビゲーション バーを実現するための 2 つの解決策をすでに説明しましたが、これら 2 つの解決策は通常の状況にのみ適しており、新浪微博のような場合は、下部ナビゲーション バーの項目に小さな赤いアイコンを表示する必要があります。クリックして、いくつかのメッセージを追加します。このように、前の 2 つの解決策は無力であるように見えます。他の人の APP がどのように行われるかを見てみましょう。携帯電話の開発者向けオプションを開き、内部を確認してください: 表示レイアウトの境界、および次に、 参照されたアプリを開くと、下部のナビゲーション バーが次のようになっていることがわかります。
上の図から、この下部ナビゲーション バーは単純な TextView や RadioGroup で構成されていないことがわかります。おおよそのレイアウト スキームは次のようになります: 外側の層に LinearLayout、中央に RelativeLayout、中央に TextView次に TextView の右上隅に赤い丸の背景または小さな赤い点が付いた TextView があります。おそらくこれが当てはまります。これらの点は通常は表示されず、情報プッシュを受信すると再び表示されます。は、該当するカテゴリ情報がある場合、該当する情報数を表示します！それでは、この下部のナビゲーション バーの効果を実感してみましょう。なお、デモンストレーションの都合上、ここでは Fragment の切り替え効果はデモンストレーションしません。さらに、ちなみに、アクティビティ内のコンポーネントのナレッジ ポイントを取得するには、フラグメントを確認してください。
1.実現効果図：
わかりやすくするために、ここのボタンをクリックしてプッシュ情報の受信をシミュレートし、赤い点を表示します。
ランニング効果図:
2. 導入プロセス:
さて、次に上記のエフェクトを実装してみましょう~
ステップ 1: 関連するリソース ファイルの準備:
前と同様に、Drawable シリーズのリソースを準備します。
テキストリソース: 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_selected="true" />
<item android:color="@color/text_gray" />
</selector>
アイコンリソース: tab_menu_better.xml
<?xml version="1.0"coding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap /tab_better_pressed" android:state_selected="true" />
<item android:drawable="@mipmap/tab_better_normal" />
</selector>
残りの3つも出してね～！
ステップ 2: アクティビティのレイアウト コードを記述します。
次のように、4 つのオプションの TextView と右上隅の赤い点の番号属性は似ているためです。
<TextView
android:id="@+id/tab_menu_channel"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:textColor="@drawable/tab_menu_text "
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert"/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp" layout_height="20dp"
android:background="@mipmap/bg_num"
android:layout_toRightOf="@+id/tab_menu_channel"
android:layout_marginLeft="-10dp"
android:text="99+"
android:textSize="12sp"
android:gravity="center"
android:textColor="@color/text_white"/>
それらを抽出して、style.xml に書き込みます。
<style name="tab_menu_text">
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">48dp< /item>
<item name="android:layout_centerInParent">true</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
</style>
<style name="tab_menu_bgnum">
<item> name="android:layout_width">20dp</item>
<item name="android:layout_height">20dp</item>
<item name="android:背景">@mipmap/bg_num</item>
<item name="android:layout_marginLeft">-10dp</item>
<item name="android:textSize">12sp</item>
<item name="android:gravity" ">センター</item>
<item name="android:textColor">@color/text_white</item>
</スタイル>
次に、 activity.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"
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_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"layout_height="match_parent"
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>
<LinearLayout
android:id="@+id/ly_tab_menu"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/ bg_white"
アンドロイド:orientation="horizontal">
<LinearLayout
android:id="@+id/ly_tab_menu_channel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android :layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/tab_menu_channel"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert" />
<TextView
android:id="@+id/tab_menu_channel_num"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_channel"
android:text="99+"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id= "@+id/ly_tab_menu_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width = "wrap_content"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/tab_menu_message"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_message"
android:text="@ string/tab_menu_profile" />
<TextView
android:id="@+id/tab_menu_message_num"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_message"
android:text="99+"
android:Visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ly_tab_menu_better"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding ="5dp">
<TextView
android:id="@+id/tab_menu_better"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_better"
android:text="@string/tab_menu_pay" />
<TextView
android:id="@+id/tab_menu_better_num"
android:layout_width = "wrap_content"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_better"
android:text="99+"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id= "@+id/ly_tab_menu_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
<TextView
android:layout_height="match_parent"
android:padding="5dp">layout_toRightOf="@id/tab_menu_setting"
android:visibility="gone"
android:id="@+id/tab_menu_setting"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_setting"
android:text="@string/tab_menu_alert" />
<ImageView
android:id="@+ id/tab_menu_setting_partner"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginLeft="-5dp"
android:layout_toRightOf="@id/tab_menu_setting"
android:src="@mipmap/partner_red" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<View
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_above ="@id/ly_tab_menu"
android:background="@color/div_white" />
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above= 「@id/div_tab_bar」
アンドロイド:layout_below="@id/ly_top_bar"/>
</RelativeLayout>
ステップ 3: フラグメント インターフェイスのレイアウトとクラスを作成する
フラグメント レイアウトは 4 つの通常のボタンで構成されます。
fg_my.xml :
<?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:padding="5dp">
<ボタン
android:id="@+id/btn_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text= "第一个显示信息"/>
<Button
android:id="@+id/btn_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2番目の表示情報"/>
<Button
android:id="@+id/btn_three"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="3 番目の表示情報"/>
<Button
android:id="@+id/btn_four "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="4番目の表示情報"/>
</LinearLayout>
次に、カスタム Fragment クラスがあります。ここでは、getActivity.findViewById() を通じてアクティビティ内の小さな赤い点を取得します。これは単なる単純なコントロールの表示です。 MyFragment.java :
public class MyFragment extends Fragmentimplemented View.OnClickListener{
private Context mContext;
プライベートボタン btn_one;
プライベートボタン btn_two;
プライベートボタン btn_three;
プライベートボタン btn_four;
public MyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup コンテナ, Bundle SavedInstanceState) {
View view = inflater.inflate(R.layout.fg_my,container,false);
//UI オブジェクト
btn_one = (ボタン) view.findViewById(R.id.btn_one);
btn_two = (ボタン) view.findViewById(R.id.btn_two);
btn_three = (ボタン) view.findViewById(R.id.btn_three);
btn_four = (ボタン) view.findViewById(R.id.btn_four);
//バインドイベント
btn_one.setOnClickListener(this);
btn_two.setOnClickListener(this);
btn_three.setOnClickListener(this);
btn_four.setOnClickListener(this);
ビューを返す。
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_one:
TextView tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
tab_menu_channel_num.setText("11");
tab_menu_channel_num.setVisibility(View.VISIBLE);
壊す;
case R.id.btn_two:
TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
tab_menu_message_num.setText("20");
tab_menu_message_num.setVisibility(View.VISIBLE);
壊す;
case R.id.btn_three:
TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
tab_menu_better_num.setText("99+");
tab_menu_better_num.setVisibility(View.VISIBLE);
壊す;
ケース R.id.btn_4:
ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
tab_menu_setting_partner.setVisibility(View.VISIBLE);
壊す;
}
}
}
ステップ 4: MainActivity を作成する
ここで主要なロジックの実装が完了します。下部のナビゲーション バーの効果を実現するために、いくつかの部分は前の TextView と似ているため、詳細な説明は省略します。コードは次のとおりです。
MainActivity.java：
/**
* 2015/8/30 0030 に Coder-pig によって作成されました。
*/
public class MainActivity extends AppCompatActivityimplements View.OnClickListener {
//Activity UI Object
private LinearLayout ly_tab_menu_channel;
プライベート TextView tab_menu_channel;
プライベート TextView tab_menu_channel_num;
プライベート LinearLayout ly_tab_menu_message;
プライベート TextView tab_menu_message;
プライベート TextView tab_menu_message_num;
プライベート LinearLayout ly_tab_menu_better;
プライベート TextView tab_menu_better;
プライベート TextView tab_menu_better_num;
プライベート LinearLayout ly_tab_menu_setting;
プライベート TextView tab_menu_setting;
プライベート ImageView tab_menu_setting_partner;
プライベート FragmentManager fManager;
プライベート FragmentTransaction fTransaction;
プライベート MyFragment fg1;
@Override
protected void onCreate(Bundle SavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
バインドビュー();
ly_tab_menu_channel.performClick();
fg1 = 新しい MyFragment();
fManager = getFragmentManager();
fTransaction = fManager.beginTransaction();
fTransaction.add(R.id.ly_content, fg1).commit();
プライベート
voidbindViews() {
ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);
ly_tab_menu_channel.setOnClickListener(this);
ly_tab_menu_message.setOnClickListener(this);
ly_tab_menu_better.setOnClickListener(this);
ly_tab_menu_setting.setOnClickListener(this);
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ly_tab_menu_channel:
setSelected
();
tab_menu_channel.setSelected(true);
tab_menu_channel_num.setVisibility(View.INVISIBLE);
壊す;
case R.id.ly_tab_menu_message:
setSelected();
tab_menu_message.setSelected(true);
tab_menu_message_num.setVisibility(View.INVISIBLE);
壊す;
case R.id.ly_tab_menu_better:
setSelected();
tab_menu_better.setSelected(true);
tab_menu_better_num.setVisibility(View.INVISIBLE);
壊す;
case R.id.ly_tab_menu_setting:
setSelected();
tab_menu_setting.setSelected(true);
tab_menu_setting_partner.setVisibility(View.INVISIBLE);
Break;
}
}
//すべてのテキストの選択状態をリセット
private void setSelected() {
tab_menu_channel.setSelected(false);
tab_menu_message.setSelected(false);
tab_menu_better.setSelected(false);
_menu_setting .setSelected(false);
}
}
さて、ここまでで完了です~