如何创建一个完整的圆形LinearLayout或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

由于我们在 cmets 中聊天。现在我知道你真正想要的是ImageView 和TextView 的圆形裁剪。因此，经过专门的工作后，我决定形成解决方案，该解决方案将产生如下图所示的输出：

.
不要担心您可以定位的 textView它在任何地方。甚至在图像之上！并更改它的大小！

首先，您必须知道在这方面没有默认实现，这意味着在 android 中没有提供圆形裁剪视图的默认 View 类。因此，这里有两种使用 XML ONLY 来解决这个技巧的方法！

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

要求

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

• 我们需要一个带有描边的圆形（我们的想法是把它放在一个计算好的视图大小之上！）
  
  

在您的drawable 文件夹中创建一个名为circular_image_crop.xml 的文件。并粘贴代码（别着急，后面会描述！）不要忘记阅读其中的 cmets：

<?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（此框架布局不是任何视图的根视图，只需将其复制到您想要显示此布局的任何视图中 ) 继续粘贴下面的代码（我们稍后会解释！）再次读取其中的 cmets：

<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>

它的工作原理和自定义！？？？
好消息是我们使用了框架布局并将我们的真实视图定位在水平中心（方形图像）。我们制作了drawable，它是一个圆形，并且在中心还有一个圆形孔（空间），它匹配高度和我们的图片。最后，我们添加我们的 textview 并放在所有这些的顶部，但在底部（它不应该遮挡图像吗？）。

因此，我们可以理解这一点的方式是将以下图像视为所需内容的轮廓。（不要认为它很复杂）：



所以从那里我们可以看到它在圆形裁剪中间的图像上是如何变化的等等



下一阶段：



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



是的，我们已经完成了布局！自定义呢。

自定义

对于颜色，您可以将自己的颜色放在 FrameLayout 背景中的任何位置以及可绘制对象的笔划中。但永远不要更改 <solid> 颜色，它应该始终完全透明。
为了自定义圆形裁剪的半径，让我们深入研究其数学公式来计算图像的覆盖范围！

数学

让您的图像的width 或height（图像是方形的记住）为x dps。那么drawable 中的值是

行程= 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 中得到的输出。我也不能保证这在各种设备中会是什么样子，尤其是旧设备！



结论

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

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