Android小計數器旁邊有一個按鈕

Question

我想在按鈕旁邊添加一個小計數器，以顯示某些項目的剩余數量，例如，剩余未使用的提示數量。 目標布局如下所示：

題：

我研究過網絡，發現有人說要為每個數量使用不同的圖片。 然而，如果數量可以達到100，怎么能解決？ 真的有必要畫這樣的嗎？

我想在RelativeLayout中將2個按鈕粘在一起，這樣當用戶按下底部按鈕時，頂部按鈕會向上和向下計數和setText本身，但是有更好的解決方案還是導入？

編輯：

感謝Rupesh提供您的代碼和建議！ 我已經實現如下。 但是你知道如何將紅色圓圈textview進一步向右移動嗎？ 並且20也無法在紅圈中正確顯示......

碼：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp" >

    <Button
        android:id="@+id/button_tip"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/orange_btn"
        android:onClick="button_tip_click"
        android:text="Hello" />

    <TextView
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_gravity="top|right"
        android:background="@drawable/red_circle_btn"
        android:gravity="center"
        android:text="20"
        android:textColor="@color/white"
        android:textSize="8sp"
        android:textStyle="bold" />
</FrameLayout>

Answer 1

設置Button的背景可繪制為自定義Drawable，如下所示：

public class DecoratedTextViewDrawable extends LayerDrawable {
    private int mCnt = 0;
    private Paint mPaint;
    private TextView mParent;
    private ColorStateList mColors;
    private Rect mBounds;

    public DecoratedTextViewDrawable(TextView tv, Drawable[] layers, int cnt) {
        super(layers);
        mParent = tv;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setTextAlign(Align.CENTER);
        mPaint.setTextSize(tv.getTextSize());
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);
        int[][] states = {
                {android.R.attr.state_pressed}, {android.R.attr.state_focused}, {}
        };
        int[] colors = {
                0xff0000aa, 0xff880000, 0xff00aa00
        };
        mColors = new ColorStateList(states, colors);
        mBounds = new Rect();
        setCnt(cnt);
    }

    public void setCnt(int cnt) {
        mCnt = cnt;
        String s = Integer.toString(cnt);
        mPaint.getTextBounds(s, 0, s.length(), mBounds);
        invalidateSelf();
    }

    @Override
    protected boolean onStateChange(int[] state) {
        invalidateSelf();
        return super.onStateChange(state);
    }

    @Override
    public boolean isStateful() {
        return true;
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        float x = mPaint.getTextSize() * 1.5f;
        float r = mPaint.getTextSize() * 0.9f;
        int base = mParent.getBaseline();
        int[] stateSet = getState();
//        Log.d(TAG, "draw " + StateSet.dump(stateSet));
        int color = mColors.getColorForState(stateSet, 0xff000000);
        mPaint.setColor(color);
        canvas.drawCircle(x, base + mBounds.top + mBounds.height() / 2, r, mPaint);
        mPaint.setColor(0xffeeeeee);
        canvas.drawText(Integer.toString(mCnt), x, base, mPaint);
    }
}

你可以像這樣使用它：

// Activity.onCreate method
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);

int NUM = 5;
final int[] cnt = new int[NUM];
Random r = new Random();
for (int i = 0; i < NUM; i++) {
    cnt[i] = r.nextInt(20);
    Button b = new Button(this);
    b.setText("Click me");
    b.setTextSize(18);
    b.setTag(i);

    Drawable[] layers = {b.getBackground()};
    Drawable d = new DecoratedTextViewDrawable(b, layers, cnt[i]);
    b.setBackgroundDrawable(d);
    OnClickListener l = new OnClickListener() {
        @Override
        public void onClick(View v) {
            DecoratedTextViewDrawable  d = (DecoratedTextViewDrawable) v.getBackground();
            int idx = (Integer) v.getTag();
            d.setCnt(++cnt[idx]);
        }
    };
    b.setOnClickListener(l);
    ll.addView(b);
}
setContentView(ll);

Answer 2

使用此功能 - 並繼續使用計數更新textviews文本

 <FrameLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">

 <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/your_phone_call_image"
     android:gravity="center"
     android:scaletype="matrix"/>

  <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="1"
     android:padding="5dp"
     android:gravity="top|right"  <!--this is important-->
     android:background="@drawable/your_counter_red_background"/>
 </FrameLayout>

Answer 3

我建議你可以使用FrameLayout。 1.-您可以使用2個圖像作為按鈕，一個用於小圓圈，並使用文本視圖作為數字... 2.-您可以使用一個圖像作為按鈕，並為小圓圈創建漸變文字視圖..

對於frameLayout，請參閱： http ： //developer.android.com/reference/android/widget/FrameLayout.html對於漸變，請參閱： 如何在android中制作漸變背景 。