如何创建Android材质设计UI小部件?

萨姆维德·库尔卡尼(Samvid kulkarni)

我确实阅读了新的android材质设计指南,但找不到任何有关如何创建此UI窗口小部件(元素)的信息。Gmail,S Converter等应用程序已更新其应用程序以支持新的材料设计。

我已经添加了它的屏幕截图。这是它的链接。由于低点,我不能放图片。对不起

关于如何制作的任何建议?

Wmora

您正在谈论“浮动操作按钮”。底线是:没有本地“ FAB”小部件(至少目前是这样),它是必须实现的自定义布局。

如果您真的想完全实施Material Design应用,建议您看一下Google的2014 I / O应用他们在这里有一个FAB布局的示例

这也是创建一个的代码。正是出于这一要点

public class FloatingActionButton extends View {

    Context context;
    Paint mButtonPaint;
    Paint mDrawablePaint;
    Bitmap mBitmap;
    boolean mHidden = false;

    public FloatingActionButton(Context context) {
        super(context);
        this.context = context;
        init(Color.WHITE);
    }

    public void init(int color) {
        setWillNotDraw(false);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        mButtonPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mButtonPaint.setColor(color);
        mButtonPaint.setStyle(Paint.Style.FILL);
        mButtonPaint.setShadowLayer(10.0f, 0.0f, 3.5f, Color.argb(100, 0, 0, 0));
        mDrawablePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        setClickable(true);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.6), mButtonPaint);
        canvas.drawBitmap(mBitmap, (getWidth() - mBitmap.getWidth()) / 2,
                (getHeight() - mBitmap.getHeight()) / 2, mDrawablePaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            setAlpha(1.0f);
        } else if (event.getAction() == MotionEvent.ACTION_DOWN) {
            setAlpha(0.6f);
        }
        return super.onTouchEvent(event);
    }

    public void setColor(int color) {
        init(color);
    }

    public void setDrawable(Drawable drawable) {
        mBitmap = ((BitmapDrawable) drawable).getBitmap();
        invalidate();
    }

    public void hide() {
        if (!mHidden) {
            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1, 0);
            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1, 0);
            AnimatorSet animSetXY = new AnimatorSet();
            animSetXY.playTogether(scaleX, scaleY);
            animSetXY.setInterpolator(new AccelerateInterpolator());
            animSetXY.setDuration(100);
            animSetXY.start();
            mHidden = true;
        }
    }

    public void show() {
        if (mHidden) {
            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 0, 1);
            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 0, 1);
            AnimatorSet animSetXY = new AnimatorSet();
            animSetXY.playTogether(scaleX, scaleY);
            animSetXY.setInterpolator(new OvershootInterpolator());
            animSetXY.setDuration(200);
            animSetXY.start();
            mHidden = false;
        }
    }

    public boolean isHidden() {
        return mHidden;
    }

    public static class Builder {
        private FrameLayout.LayoutParams params;
        private final Activity activity;
        int gravity = Gravity.BOTTOM | Gravity.RIGHT; // default bottom right
        Drawable drawable;
        int color = Color.WHITE;
        int size = 0;
        float scale = 0;

        /**
         * Constructor using a context for this builder and the
         * {@link FloatingActionButton} it creates
         * @param context
         */
        public Builder(Activity context) {
             scale = context.getResources().getDisplayMetrics().density;
            // The calculation (value * scale + 0.5f) is a widely used to convert to dps to pixel
            // units based on density scale
            // see <a href="http://developer.android.com/guide/practices/screens_support.html">
            // developer.android.com (Supporting Multiple Screen Sizes)</a>
            size = (int) (72 * scale + 0.5f); // default size is 72dp by 72dp
            params = new FrameLayout.LayoutParams(size, size);
            params.gravity = gravity;

            this.activity = context;
        }

        /**
         * Sets the FAB gravity.
         */
        public Builder withGravity(int gravity) {
            this.gravity = gravity;
            return this;
        }

        /**
         * Sets the FAB margins in dp.
         */
        public Builder withMargins(int left, int top, int right, int bottom) {
            params.setMargins((int) (left * scale + 0.5f), (int) (top * scale + 0.5f),
                    (int) (right * scale + 0.5f), (int) (bottom * scale + 0.5f));
            return this;
        }

        /**
         * Sets the FAB drawable.
         *
         * @param drawable
         */
        public Builder withDrawable(final Drawable drawable) {
            this.drawable = drawable;
            return this;
        }

        /**
         * Sets the FAB color.
         *
         * @param color
         */
        public Builder withColor(final int color) {
            this.color = color;
            return this;
        }

        /**
         * Sets the FAB size.
         *
         * @param size
         * @return
         */
        public Builder withSize(int size) {
            size = (int) (size * scale + 0.5f);
            params = new FrameLayout.LayoutParams(size, size);
            return this;
        }

        /**
         * Creates a {@link FloatingActionButton} with the
         * arguments supplied to this builder.
         */
        public FloatingActionButton create() {
            final FloatingActionButton button = new FloatingActionButton(activity);
            button.setColor(this.color);
            button.setDrawable(this.drawable);
            params.gravity = this.gravity;
            ViewGroup root = (ViewGroup) activity.findViewById(android.R.id.content);
            root.addView(button, params);
            return button;
        }
    }

}

然后,您将像这样添加:

FloatingActionButton mFab = new FloatingActionButton.Builder(this)
            .withColor(getResources().getColor(R.color.accent_color))
            .withDrawable(getResources().getDrawable(R.drawable.fab_icon))
            .withSize(72)
            .withMargins(0, 0, 16, 16)
            .create();

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Android材质设计样式中创建按钮阴影

来自分类Dev

如何在Android Button(材质设计)上创建阴影

来自分类Dev

设计Android小部件的宽度和高度

来自分类Dev

Android开关小部件重新设计

来自分类Dev

如何创建抽屉小部件

来自分类Dev

如何在Android Studio中创建小部件?

来自分类Dev

Android:如何在创建时更新小部件文本

来自分类Dev

Android:如何在创建时更新小部件文本

来自分类Dev

如何从PreferenceActivity创建Android App小部件作为配置活动

来自分类Dev

如何以编程方式隐藏QtDesigner“设计”模式创建的小部件?

来自分类Dev

Qt小部件;如何创建像QT Creator项目选择器这样的设计

来自分类Dev

使用UI设计文件并使用自定义构造函数QT创建自定义小部件

来自分类Dev

如何在Eclipse中使用Android中的材质设计创建搜索栏?

来自分类Dev

如何重新翻译动态创建的小部件?

来自分类Dev

如何重新翻译动态创建的小部件?

来自分类Dev

如何使用Qt Creator的设计器水平对齐小部件

来自分类Dev

如何定义要在设计阶段隐藏的小部件?

来自分类Dev

支持Android材质设计

来自分类Dev

Android材质设计故障

来自分类Dev

材质设计的Android颜色

来自分类Dev

Android材质设计故障

来自分类Dev

材质设计的Android颜色

来自分类Dev

Android材质设计-创建工具栏

来自分类Dev

AppCompat材质样式小部件色调错误

来自分类Dev

AppCompat材质样式小部件色调错误

来自分类Dev

如何通知Android小部件重绘

来自分类Dev

如何自定义android小部件

来自分类Dev

从代码访问在.ui文件中创建的小部件

来自分类Dev

如何使用按钮,edittext和更多组件在android中创建小部件

Related 相关文章

热门标签

归档