Android中的倾斜或倾斜UI设计 [英] Slanting or Sloping UI design in Android

查看:263
本文介绍了Android中的倾斜或倾斜UI设计的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试设计一个与此非常相似的UI.我已经能够设计出几乎与上图类似的图像,但是并没有实现倾斜或倾斜部分的方法.

I am trying to design an UI very similar to this. I have been able to design it almost similar to the image above, but am not getting a way to implement the slanting or sloping part.

1)谁能给出一个示例布局,说明如何实现倾斜布局?

1) Can any one give an example layout of how can I implement the slanting layout?

2)我如何将FAB放在倾斜部分上方?

2) And how can I place the FAB right there over the slant portion?

任何帮助将不胜感激.

推荐答案

您可以使用Canvas使用倾斜顶部"创建自定义视图,然后将其放置在textView上,以实现这种外观.

You can create a custom view with Slant top using Canvas and then place it over your textView, to achieve this look and feel.

Code snippet for slant top custom view :-

public class SlantView extends View {
    private Context mContext;
    Paint paint ;
    Path path;

    public SlantView(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);
        mContext = ctx;
        setWillNotDraw(false);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int w = getWidth(), h = getHeight();
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setAntiAlias(true);

        path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(0,0);
        path.lineTo(0,h);
        path.lineTo(w,h);
        path.close();
        canvas.drawPath(path, paint);
    }
}

如何与TextView一起使用的代码段

Code snippet for how to use it with TextView

<com.pix.app.views.SlantView
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:id="@+id/slant_view"
 />

 <TextView-----/>

这篇关于Android中的倾斜或倾斜UI设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆