在Android中制作三角形按钮

时间:2016-08-17 19:53:25

标签: android xml xamarin

有没有办法制作一个可以用作Android按钮的等腰三角形?

此按钮占据整个屏幕:

one of these vanillaJS datepicker implementations

这是我当前的xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/main_menu_bg"
    >

     <RelativeLayout
         android:layout_centerInParent="true"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal">

          <ImageView
              android:id="@+id/ai_button"
              android:background="@drawable/ai_button"
              android:layout_alignParentLeft="true"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />

     </RelativeLayout>

</RelativeLayout>

我尝试使用ShapeDrawable创建一个看起来像我需要的按钮的三角形,但我的ShapeDrawable不起作用,我尝试制作一个ImageButton,但按钮占据了整个屏幕,我尝试使用常规按钮,但按钮仍然占据整个屏幕,我尝试使用ImageView,但它仍然做同样的事情。

按钮大小总是太大,如果我缩小实际的按钮大小,那么图像本身会缩小,我无法找到一种方法来拉伸图像以填充视图或按钮。

我一直在尝试在Android Studio中构建它,因为预览选项非常方便,但是如果我可以在Xamarin中使用某些东西,或者如果我可以通过编程方式执行某些操作,那么我可以使用它。我打开了。

2 个答案:

答案 0 :(得分:0)

您必须测量屏幕高度并了解按钮将覆盖多少(例如以百分比表示)。但是你在这里非常糟糕。示例:有两个设备带有全高清显示屏,一个带有物理按键回家/开关/背面,第二个有屏幕显示 - 你的位图将在其中一个上拉伸,所以你也应该正确拉伸你的按钮...而你为wrap_content设置ImageView,因此无论垂直拉伸背景如何,它都将具有“固定”高度...不要这样做

编辑:您可以尝试使用LinearLayout的weightSum参数来计算按钮的“百分比”大小。不太好,但可能是你需要的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3"
    android:gravity="center"
    android:src="@drawable/main_menu_bg"
    >

      <ImageView
          android:id="@+id/ai_button"
          android:layout_width="wrap_content"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:src="@drawable/ai_button"
          android:scaleType="fitXY"/>

 </RelativeLayout>

答案 1 :(得分:0)

XML

   <item android:top="45dp">
  <shape>
      <size android:height="100dp" android:width="90dp"/>
     <solid android:color="@android:color/holo_orange_light" />
   </shape>
 </item>
       <item android:top="36dp" android:left="11dp">
<rotate
    android:fromDegrees="45"
    android:toDegrees="0"
     android:pivotX="80%"
     android:pivotY="20%" >
     <shape>
         <size android:width="40dp"
            android:height="30dp"/>
           <stroke android:color="@android:color/holo_orange_light"             android:width="1dp"/>
        <solid android:color="@android:color/holo_orange_light" />
    </shape>
</rotate>

        

 Use it in your layout

 public class CustomTextView extends TextView {

private int mWidth;
private int mHeight;


public CustomTextView(Context context, AttributeSet attrs)  {
    super(context, attrs);

}

@Override
protected void onDraw(Canvas canvas) {

   super.onDraw(canvas);
    Paint mPaint = new Paint();
    int color = getResources().getColor(R.color.YourColor);

    mPaint.setColor(color);
    Path mPath = new Path();
    mPath.moveTo(.0f, this.getHeight());
    mPath.lineTo(0.8f * this.getWidth(), this.getHeight());
    mPath.lineTo(this.getWidth(), 0.5f * this.getHeight());
    mPath.lineTo(0.8f * this.getWidth(), .0f);
    mPath.lineTo(.0f, .0f);
    mPath.lineTo(.0f, this.getHeight());

    canvas.clipPath(mPath);
    canvas.drawPath(mPath,mPaint);


}
 }

关于xml示例|有两个矩形重叠。你必须经常使用这些值,这使得很难在不同的视图上使用。我认为在这种情况下使用自定义视图是最佳解决方案。