将屏幕划分为五个相等的圆圈

时间:2017-01-09 15:32:02

标签: android vector xamarin geometry

如何在五个相等的圆圈上划分屏幕。 我使用xml文件作为圈子的背光

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape android:shape="oval">
 <solid android:color="#59d5fe"/>
 </shape>
 </item>
</selector>

这是代码

LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/img6"
    android:weightSum="5"
    android:orientation="horizontal" >

  <ImageView
     android:layout_width="0dp"
     android:layout_weight="1"
     android:background="@drawable/vectorshape"
    android:scaleType="fitXY"
     android:id="@+id/img1"
     android:layout_height="wrap_content"/>
    <ImageView
     android:layout_width="0dp"
     android:background="@drawable/vectorshape"
      android:scaleType="fitCenter"
      android:layout_weight="1"
      android:id="@+id/img2"
     android:layout_height="wrap_content"/>
  <ImageView
     android:layout_width="0dp"
     android:background="@drawable/vectorshape"
    android:scaleType="fitCenter"
     android:layout_weight="1"
     android:id="@+id/img3"
     android:layout_height="wrap_content"/>
  <ImageView
     android:layout_width="0dp"
     android:background="@drawable/vectorshape"
     android:scaleType="fitCenter"
     android:id="@+id/img4"
     android:layout_weight="1"
     android:layout_height="wrap_content"/>
  <ImageView
     android:layout_width="0dp"
     android:layout_weight="1"
     android:scaleType="fitCenter"
      android:id="@+id/img5"
     android:background="@drawable/vectorshape"
     android:layout_height="wrap_content"/>

</LinearLayout>

</LinearLayout>

特别是我希望高度的大小与宽度的大小相同,但是在dp中预定义大小之前它会给出空白屏幕。

2 个答案:

答案 0 :(得分:1)

因为ImageView宽度取决于屏幕宽度。而且你没有设定锋利的大小。

我认为您需要一个正方形ImageView,应由您自己定义以下代码:

namespace SharpText_Demo
{
    [Register("sharpText_Demo.SquareImageView")]
    public class SquareImageView : ImageView
    {
        public SquareImageView(Context context):base(context)
        {

        }

        public SquareImageView(Context context, IAttributeSet attrs):base(context,attrs,0)
        {

        }

        public SquareImageView(Context context, IAttributeSet attrs, int defStyle):base(context,attrs,defStyle)
        {

        }

        protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            SetMeasuredDimension(GetDefaultSize(0, widthMeasureSpec), GetDefaultSize(0, heightMeasureSpec));
            int childWidthSize = MeasuredWidth;
            //SET  height = width
            heightMeasureSpec = widthMeasureSpec = MeasureSpec.MakeMeasureSpec(childWidthSize, MeasureSpecMode.Exactly);
            base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}

设置ImageView高度始终等于'宽度。

然后更改您的axml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/img6"
        android:weightSum="5"
        android:orientation="horizontal">
        <SharpText_Demo.SquareImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitXY"
            android:background="@drawable/vectorshape"
            android:id="@+id/img1" />
        <SharpText_Demo.SquareImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:layout_weight="1"
            android:background="@drawable/vectorshape"
            android:id="@+id/img2" />
        <SharpText_Demo.SquareImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:layout_weight="1"
            android:background="@drawable/vectorshape"
            android:id="@+id/img3" />
        <SharpText_Demo.SquareImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:id="@+id/img4"
            android:background="@drawable/vectorshape"
            android:layout_weight="1" />
        <SharpText_Demo.SquareImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/img5"
            android:background="@drawable/vectorshape" />
    </LinearLayout>
</LinearLayout>

忘记scaleType,它用于android:src = ....

你将获得截屏:

enter image description here

答案 1 :(得分:0)

您可以将vectorshape设为circle.png(width = height)之类的图像。并使用ImageView android:adjustViewBounds="true"属性wrap_content ImageView。你的ImageView是这样的:

<ImageView
            style="@style/imv_circle_group"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            android:src="@drawable/circle" />