如何创建一个Android材料设计UI部件？ [英] How do I create an Android material design UI widget?
问题描述
我看过新的Android材料设计指南，但我无法找到有关如何创建这个UI部件（元）任何东西。如Gmail应用程序，S转换器等已更新他们的应用程序以支持新的材料设计。
I did read new android material design guide but i am not able to find anything about how to create this UI widget(element). Apps like Gmail, S converter etc has updated their apps to support new material design.
我已经加入了它的屏幕截图。 这里是链接到它。的，因为低点我不能忍受的图像。抱歉它
I have added screenshot of it. Here is the link to it. because of low points i can't put the picture. sorry about it
在任何建议，我怎能让??
Any suggestions on how shall i make it??
推荐答案
您说的是浮动操作按钮。底线是：有没有本地的FAB小工具（至少目前如此），这是一个必须实现的自定义布局
You are talking about the Floating Action Button. Bottom line is: there is no native "FAB" widget (at least for now), it is a custom layout that must be implemented.
如果你真的想充分实现材料设计的应用程序，我建议你看看谷歌的2014年I / O应用。他们有一个FAB布局示例<一href="https://github.com/google/iosched/blob/36d88985ff6813fa9035530cd426393720a6f7b4/android/src/l$p$pview/java/com/google/samples/apps/iosched/ui/widget/AddToScheduleFABFrameLayout.java"相对=nofollow>这里。
If you really want to fully implement a Material Design app, I recommend you take a look at Google's 2014 I/O app. They have an example of a FAB layout here.
下面也将code来创建一个。正是从这个要点，我从的这个帖子。
Here's also the code to create one. It is from this gist that I got from this post.
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;
}
}
}
那么你要把这样的：
Then you would add like this:
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();
这篇关于如何创建一个Android材料设计UI部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
