【问题标题】:ImageViews Into Rounded LinearLayout将 ImageViews 转换为圆形 LinearLayout
【发布时间】:2016-10-18 17:05:50
【问题描述】:

我在这个圆形的 LinearLayout 中有一些图像视图。这是我的简单代码:

<LinearLayout
    android:layout_width="128dp"
    android:layout_height="128dp"
    android:id="@+id/point_image_table1"
    android:orientation="vertical"
    android:drawable="@drawable/image_view_style"
    android:layout_below="@+id/repoint_p_name"
    android:weightSum="4">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:id="@+id/imageView61"
        android:layout_marginBottom="1dp"
        android:src="@color/realRed"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView71"
            android:layout_marginRight="1dp"
            android:layout_marginEnd="1dp"
            android:scaleType="centerCrop"
            android:src="@drawable/pinpoint_logo_large"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView51"
            android:scaleType="centerCrop"
            android:src="@drawable/pinpoint_logo_large"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginLeft="1dp"
            android:layout_marginStart="1dp"
            android:scaleType="centerCrop"
            android:id="@+id/imageView81"
            android:src="@drawable/pinpoint_logo_large"/>

</LinearLayout>

但是如果没有看到 LinearLayout,Images 角会覆盖 LinearLayout 角,最后是边框。
我该如何解决?我需要将一些图像视图设置为线性布局,还需要将边框和圆角设置为线性布局。
谢谢。

编辑:我想要这样的东西(四张图片放入圆角布局):

【问题讨论】:

  • 所以基本上你想要一些带有容器圆角的图像拼贴?
  • @MohammedAtif 是的。类似的东西

标签: java android xml android-layout material-design


【解决方案1】:

我建议你使用多张图片的卡片视图,这样很容易得到拼贴视图,试试这种方式

<android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        card_view:cardCornerRadius="10dp">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="300dp"
        android:layout_height="300dp">



        <LinearLayout
            android:id="@+id/left_container"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_width="150dp"
            android:layout_height="300dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/dog"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"

                android:background="@drawable/mmm" />


            <ImageView
                android:id="@+id/bottom_left_image"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginTop="5dp"
                android:background="@drawable/mmm" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/right_container"
            android:layout_width="150dp"
            android:layout_height="300dp"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/left_container"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/top_right_image"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/mmm" />


            <ImageView
                android:id="@+id/bottom_right_image"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_weight="0"
                android:background="@drawable/mmm" />

        </LinearLayout>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"/>

    </RelativeLayout>

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

输出

【讨论】:

  • 就像一个魅力!这正是我想要的。谢谢
  • 很高兴为您提供帮助..愉快的编码...:)
【解决方案2】:

您可以在 drawable 文件夹中创建 XML 文件。调用它,例如 shape.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"   >

<solid
    android:color="#888888" >
</solid>

<stroke
    android:width="2dp"
    android:color="#C4CDE0" >
</stroke>

<padding
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"    >
</padding>

<corners
    android:radius="11dp"   >
</corners>

设置线性布局

<LinearLayout
android:layout_width="128dp"
android:layout_height="128dp"
android:id="@+id/point_image_table1"
android:orientation="vertical"
android:drawable="@drawable/image_view_style"
android:layout_below="@+id/repoint_p_name"
android:weightSum="4">
</LinearLayout>

希望这会有所帮助....

【讨论】:

  • 感谢您的回复,我已经使用了这个解决方案。但它没有用。
【解决方案3】:

首先,您要创建一个简单的可绘制对象并使用此代码。您可以根据自己的选择更改宽度或笔触和颜色。半径也可以简化为android:radius=dpValue。

?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffffff"/>    

    <stroke android:width="3dp"
            android:color="#ff000000"/>

<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

一旦你创建了它,你就可以将它指定为你的 imageView 的背景:

android:background="@drawable/yourDrawableName" 

我可能会尝试将您的图像视图设为 wrap_content。您还应该尝试在图像视图的高度上设置 0dp。

希望这会有所帮助。

【讨论】:

  • 感谢您的回复。我已经使用了这个解决方案。但是图像覆盖了线性布局的边框
  • 您能否用您的活动截图更新您的问题?我想看看“图像覆盖了线性布局的边框”是什么意思。我明白,但我想看看它,所以我可以考虑如何解决它。
  • 为线性布局提供内边距
  • 好的,我想您提供的图像是您创建的虚拟版本,而不是实际的 XML 渲染?如果是这样,那么我认为您需要将具有半径的背景添加到 LinearLayout。 android:background="@drawable/yourDrawableName" 注意我是如何使用背景而不是android:drawable 旁注 - 我看到你有来自野生动物摄影奖的图片!很酷的东西:D
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-11
相关资源
最近更新 更多