android - 如何创建完整的Round 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>

如果我做了ImageViewmatch_parent。它从布局的圆形中出来。我希望内容沿着布局的圆形裁剪。

Answer 1

因为我们在评论中聊到的。现在我知道你真正想要的是你的ImageView和TextView的圆形裁剪。因此，经过一番努力，我决定形成一个解决方案，将产生一个输出，如下图所示：。不要担心文本视图，你可以把它放在任何地方。即使是在图像之上！改变它的大小！首先，您必须知道没有默认的实现，这意味着在android中没有提供循环裁剪视图的默认视图类。因此，这里有两种方法可以仅使用xml来解决这个问题！
第一选择（最佳选择）
我们将使用一个FrameLayout布局，它是一个在彼此之上添加视图的布局。这意味着如果你放第一个，那么第二个将在第一个上面等等。
要求
若要在圆形视图中很好地适应图像，则图像应为正方形（这只是逻辑上的），因此我们需要将宽度和高度设置为相等的值。
我们需要一个带有笔划的圆形（想法是把它放在一个计算良好的视图大小之上！）
在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>

如何工作和定制！？？是吗？
好的方面是我们使用了我们的框架布局，并将我们的真实视图定位在水平中心（方形图像）。我们做了我们的drawable这是一个圆形，并且在中心有一个圆孔（空间），与我们的高度和图片相匹配。最后，我们添加textview并将其放在所有这些视图的顶部，但放在底部（它不应该遮挡图像，对吧？）。因此，我们可以理解的方法是将下面的图像视为所需的轮廓（不要认为它很复杂）：因此，从那里我们可以看到它是如何在图像的中间进行圆形裁剪的，等等下一阶段：从那里我们可以将相同的背景色应用到整个布局（framelayout），以隐藏圆形的东西，留下我们自己的可见空间。是的，我们已经完成了我们的布局！定制呢。
定制
对于颜色，您可以将自己的颜色放置在框架布局背景中的任何位置以及可绘制的笔划中。但是永远不要改变颜色，它应该始终是完全透明的。为了定制圆形作物的半径，让我们深入挖掘它的数学公式，以计算图像的覆盖范围！数学
让您的图像的<solid>或width（图像是正方形记忆）为x dps。那么height中的值是
行程=0.2071*x
大小（高度和宽度）=笔划+x
您可以使用2或3 dps来消除截断错误！
实际上，后面的数学公式是基于下面的公式。如果您对下面的注释感兴趣，则该公式有效：

第二种选择
另一个我认为对那些不关心圆形视图之间空间的人来说很好的选择是在cardview内部设置drawable并将拐角半径设置为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工作室得到的一个输出。我也不能保证在各种各样的设备，尤其是旧设备中，这会是什么样子！
结论两种方法均有效。了解两者甚至可以导致更多的自定义，如使用第一个选项和第二个选项来实现自定义，如添加圆形图像的高程。但第一种方法适合日常使用的数量，它也给所有安卓设备带来同等的体验。我希望这甚至能帮助那些有同样问题的未来用户。