[解決済み] ボタンアイコンに新規アイテム数を追加 - Android

質問

私は開発者です。私は以下のデザインを実装する必要があります。私はすでに機能的なアプリを持っていますが、これにアプローチする方法さえ疑問に思う？特に、タブの下にある "New" アイテムの数を表示する方法に興味があります。私が知っている方法は、赤い点の新しいアイコンを作成し、新しいものが利用可能になったときにそれらを表示するだけです。

しかし、これらの丸い円をタイトルの上に浮かせ、中に番号を表示させる方法がわかりません。どなたか、何を探せばよいかの提案をお持ちですか? サンプルは？指示は？

アクティビティを分離することについての2つ目の質問です。このようにボタンを組み合わせるコントロールを作り、アクティビティで膨らませるだけでいいのでしょうか？そうでなければ、タブ付きのアクティビティを作るかもしれませんが、このようなスタイルにすることが可能かどうかわかりません。

どのように解決するのですか？

バッジを TextView を呼び出すことによって、数値を好きなように設定することができます。 setText() . の背景を設定する。 TextView の背景をXMLとして <shape> を使用すると、境界線を持つ実線またはグラデーションの円を作成することができます。 XML drawable は、テキストの増減に伴ってビューのサイズに合わせて拡大縮小します。

res/drawable/badge_circle.xml を参照してください。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

楕円/円形が大きな3-4桁の数字でどのようにスケールするか見てみる必要があります。 この効果が望ましくない場合は、以下のような丸みを帯びた長方形のアプローチを試してみてください。 小さな数字では、半径が収束していくので、長方形はまだ円のように見えます。

res/drawable/badge_circle.xml を参照してください。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:radius="10dip"/>
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

スケーラブルな背景を作成したら、それを単に TextView の背景に追加するだけです。

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:text="10"
  android:textColor="#FFF"
  android:textSize="16sp"
  android:textStyle="bold"
  android:background="@drawable/badge_circle"/>

最後に、これらの TextView バッジを適切なボタン/タブの上にレイアウトすることができます。 私はおそらくこれを、各ボタンをバッジと一緒に RelativeLayout コンテナでグループ化します。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <Button
    android:id="@+id/myButton"
    android:layout_width="65dip"
    android:layout_height="65dip"/>
  <TextView
    android:id="@+id/textOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/myButton"
    android:layout_alignRight="@id/myButton" 
    android:text="10"
    android:textColor="#FFF"
    android:textSize="16sp"
    android:textStyle="bold"
    android:background="@drawable/badge_circle"/>
</RelativeLayout>

少なくとも正しい方向性を示すのに十分な情報であることを願っています。