如何创建完整的RoundLayout或RelativeLayout轮

Question

我正在尝试创建一个完整的圆形布局，以便我将任何内容放在该布局中。该内容应该在圈内。怎么可能？我尝试了以下方式。但是形状并不是一直都是圆形的。有时根据空间变成椭圆形。 如何保持布局循环，内容应该进入内部？

<LinearLayout
            android:id="@+id/zodiac_Layout"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:orientation="vertical"
            android:background="@drawable/circular_background">

            <ImageView
                android:id="@+id/zodiac_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginRight="2dp"
                android:adjustViewBounds="true"
                android:src="@drawable/sunrise" />

            <TextView
                android:id="@+id/zodiac_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:text="@string/na"
                android:textColor="#fff"
                android:textSize="@dimen/nakshatra_text_size" />
        </LinearLayout>

这是circular_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#50514F"/>
    <size android:width="5dp"
        android:height="5dp"/>
</shape>

如果我制作ImageView match_parent该怎么办？它来自布局的圆形形状。 我希望沿着布局的圆形形状裁剪内容。

Answer 1

由于我们在评论中聊了什么。现在我知道你真正想要的是你的ImageView以及TextView的圆形裁剪。因此，经过专门的工作，我决定形成一个解决方案，该输出将产生如下图所示的输出：

。
不要担心textView你可以把它放在任何地方。即使在图像的顶部！并改变它的大小！
首先你必须知道没有默认的实现，这意味着没有默认的View类在android中提供循环裁剪视图。所以这里是使用 XML ONLY 来解决这个技巧的两种方法！

第一替代（最佳选择）
我们将使用FrameLayout，这是一种将视图添加到彼此之上的布局。这意味着如果您放置第一个，那么第二个将位于第一个等之上。

的要求

• 要在圆形视图中很好地拟合图像，那么它应该是 SQUARE （这只是逻辑）所以我们需要设置宽度和高度同等价值。

• 我们需要一个带笔划的圆形形状（我们的想法是将它放在计算好的视图尺寸之上！）
  
  

在drawable文件夹中创建一个名为circular_image_crop.xml的文件。并粘贴代码（别担心以后会描述它！）不要忘记阅读其中的注释：

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
  <solid android:color="#00ffffff"/>
   <!--The above colour is completely transparent!-->
  <stroke android:width="20dp" android:color="#ec407a" />
  <size android:width="140dp" android:height="140dp"/>
</shape>

制作drawable文件后，我们必须制作FrameLayout（此框架布局不是任何视图的根视图，只需将其复制到要显示此布局的任何视图中）继续并粘贴下面的代码（我们稍后会解释它！）再次阅读其中的评论：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ec407a">

        <!-- This is our framelayout! Notice our background color is the same as the one in the stroke of our drawable. Also this is your image view notice the it has width and height similar (square) do use match parent or wrap content just define a square and views will be position by adjust view bounds true-->

        <ImageView
            android:id="@+id/image_view_user_profile_image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/your_image_description"
            android:src="@drawable/your_image" />

        <!-- Ooh here we have another image! This is an image just for displaying our drawable and crop our image (how?? dont worry!) -->

        <ImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:layout_gravity="center_horizontal"
            android:contentDescription="@string/also_your_image_description_if_any"
            android:src="@drawable/circular_image_crop" />
        <!--This text view we almost forget here it is!-->
        <TextView
            android:id="@+id/your_text_view_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="125dp"
            android:gravity="center"
            android:text="John Nanai Noni"
            android:textColor="#ffffff"
            android:textSize="16sp"
            android:textStyle="bold" />
    </FrameLayout>

如何运作和自定义！???
好的是我们使用了Frame Layout并将真实视图定位在中心水平（方形图像）。我们制作了drawable这是一个圆形，并且在中心有一个圆形孔（空间），匹配高度和我们的图片。最后，我们添加了我们的textview并将其放在所有那些但位于底部（它不应该模糊图像对吗？）。

所以我们理解这一点的方式是将下面的图像看作是需要的概要。（不要认为它复杂的）： < br />


从那里我们可以看到它是如何在圆形作物等中间的图像上进行的



下一阶段：



从那里我们可以将相同的背景颜色应用于整个布局（FrameLayout）以隐藏圆形的东西并留下我们自己的可见空间。



是的，我们已完成布局！那么定制呢。

的定制

对于颜色，您可以将自己的颜色放在FrameLayout背景中的任何位置以及可绘制的笔触。但永远不要改变<solid>颜色它总是应该完全透明。
为了定制圆形裁剪的半径，我们可以挖掘它的数学公式来计算出图像的覆盖范围！

的数学

  

让您的width或height（图像是方形的记忆）为 x dps。然后，drawable中的值为

     

stroke = 0.2071 * x

     

尺寸（高度和宽度）=笔划+ x

     

您可以使用2或3 dps来消除截断错误！

实际上，背后的数学基于以下公式。如果您感兴趣的话如下评论，该公式有效：

第二替代

我认为另一个替代方案，对于那些不关心圆形视图之间的空间的人来说，是通过在CardView中创建ImageView并使角半径为half CardView的大小，例如此代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="280dp"
    android:layout_height="280dp"
    android:layout_gravity="center_horizontal"
    android:layout_margin="30dp"
    app:cardCornerRadius="140dp"
    app:cardElevation="12dp">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:src="@drawable/login_back_ground" />

 </android.support.v7.widget.CardView>

这是我在Android Studio中获得的输出。此外，我不能保证这在各种设备中看起来如何，特别是旧设备！


结论

两种方法都很好，也很有用。理解它们甚至可以导致更多的自定义，例如使用第二个替代方案来实现自定义，例如添加圆形图像的高程。但第一种方法适合日常使用的数量，它也为所有Android设备带来了相同的体验。

我希望这甚至可以帮助可能遇到同样问题的未来用户。