Android的小柜台旁边的一个按钮 [英] Android small counter next to a button

问题描述

我想下加一个小柜台到一个按钮，以显示一些项目的剩余量，例如，尖端的剩余数剩余未使用的。有针对性的布局将如下所示：

I would like to add a small counter next to a button to show the remaining quantity for some items, for example, the remaining number of tips remaining unused. Targeted layout would be as shown:

我研究网络，发现有的说用不同的图片每个数量。然而怎么会解决，如果数量可以高达100？真的有必要得出这样了呢？

I have researched the web and found that some say to use different pictures for each quantity. Yet how could it be solved if the quantity can be up to 100? Really necessary to draw such out?

我在想着要坚持2个按钮一起 RelativeLayout的这样当用户presses底部的按钮，顶部的按钮和向下计数和的setText 本身，但有一些更好的解决方案，还是进口？

I am thinking of to stick 2 buttons together in a RelativeLayout such that when the user presses the bottom button, the top button will count up and down and setText itself, but are there some better solutions or imports?

感谢Rupesh您codeS和建议！我已经实现如下。然而，你知道如何TextView的进一步移动红色圆圈的权利？和20不能正确地反映到红色圆圈所示太...

Thanks Rupesh for your codes and advice! I have implemented as follows. Yet do you know how to move the red circle textview further to the right? and the 20 cannot be properly shown in the red circle too...

<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>

推荐答案

设置按钮的背景可绘制到像这样的自定义绘制对象：

set Button's background Drawable to a custom Drawable like this one:

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);
    }
}

您可以使用它是这样的：

you can use it like this:

// 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);

这篇关于Android的小柜台旁边的一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！