无法将Imageview与另一个Imageview对齐

时间:2015-05-19 08:50:02

标签: android android-layout

这就是我要做的事情(菜单):

enter image description here

这是我迄今取得的成就:

enter image description here

请查看列表中图像下方的水平线。我无法使我的屏幕截图与要求相似。

代码:

popupmenurow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_menu_row_cont"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/rl_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imgmenuicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"//this is the image icon
        android:layout_margin="10dp"
        android:contentDescription="@null" />

    <ImageView//this is the horizontal line
        android:contentDescription="@null"
        android:id="@+id/horizontalline"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_below="@+id/imgmenuicon"
        android:layout_alignLeft="@+id/imgmenuicon"
        android:layout_alignRight="@+id/imgmenuicon"
        android:background="#4d4b56" />

    </RelativeLayout>

    <ImageView
        android:contentDescription="@null"
        android:id="@+id/verticalline"
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dp"
        android:background="#4d4b56" />

    <TextView
        android:id="@+id/tvmenutitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"
        android:paddingTop="10dp"
        android:text="Hello"
        android:textColor="@color/menutextcolor"
        android:textSize="16sp" />

</LinearLayout>

这是列表 popup_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/popup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/list_slide"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff"
        android:choiceMode="singleChoice"
        android:divider="@null"
        />

</LinearLayout>

如何在imageview下面制作水平线,类似于我的要求(顶部的图像)?

如果我删除

 android:layout_alignLeft="@+id/imgmenuicon"
        android:layout_alignRight="@+id/imgmenuicon" 

然后线条没有出现。我也明白水平线左右两侧出现的边距是由于图像视图中的android:layout_margin="10dp"所致。但我找不到解决方案。

ANSWER

感谢大家的宝贵时间。最后我解决了这个问题.M090009的解决方案已经接近但我无法解决。最后感谢Vijay给我的背景知识。

我所做的是剪切这样的图像:

enter image description here  并将该图像设置为我的菜单图标所在的相对布局的背景。

以下是完整代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_menu_row_cont"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"

    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/rl_image"
       android:background="@drawable/line_box"
       android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imgmenuicon"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"

            android:layout_centerHorizontal="true"           
            android:scaleType="centerInside" />

        <!-- <View
            android:id="@+id/horizontalline"
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_alignLeft="@+id/imgmenuicon"
            android:layout_alignRight="@+id/imgmenuicon"
            android:layout_below="@+id/imgmenuicon"
            android:background="#4d4b56"
            android:layout_marginTop="5dp"
            android:padding="10dp"
            android:contentDescription="@null" /> -->
    </RelativeLayout>

    <ImageView
        android:id="@+id/verticalline"
        android:layout_width="1dp"
        android:layout_height="fill_parent"

        android:background="#4d4b56"
        android:contentDescription="@null" />

    <TextView
        android:id="@+id/tvmenutitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_vertical"
        android:paddingLeft="5dp"
        android:text="Hello"
        android:textColor="@color/menutextcolor"
        android:textSize="16sp" />

</LinearLayout>

这是输出:

enter image description here

5 个答案:

答案 0 :(得分:1)

您可以删除图标图像上的边距并将其scaleType设置为center_corp,如下所示

 <ImageView
        android:id="@+id/imgmenuicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"//this is the image icon
        android:contentDescription="@null"
        android:scaleType="center_corp"/>

答案 1 :(得分:1)

如果上述解决方案不起作用,那就试试吧。因为所有的解决方案都很好。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_menu_row_cont"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25"
        android:background="@drawable/bordercolor" >

        <ImageView
            android:id="@+id/imgmenuicon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:contentDescription="@null" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.75" >

        <TextView
            android:id="@+id/tvmenutitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="5dp"
            android:paddingTop="10dp"
            android:text="Hello"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

答案 2 :(得分:0)

删除该分隔符的Imageview 并添加:

<View
     android:id="@+id/divider"
     android:layout_width="match_parent"
     android:layout_height="1dp"
     android:layout_below="@+id/static_account"
     android:background="@color/divider"/>

答案 3 :(得分:0)

改变imgmenuicon的attr:

android:layout_margin="10dp"

android:padding="10dp"

顺便说一句,该行应使用<View ... android:background.../>代替<ImmageView ... />

答案 4 :(得分:0)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_menu_row_cont"
android:layout_width="270dp"
android:layout_height="78dp"
android:background="#ffffff"
android:orientation="horizontal" >

<RelativeLayout
    android:layout_gravity="center_vertical|left"
    android:id="@+id/rl_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
    android:id="@+id/imgmenuicon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:src="@android:drawable/alert_dark_frame"
    android:contentDescription="@null" />

    <View
    android:contentDescription="@null"
    android:id="@+id/horizontalline"
    android:layout_width="100dp"
    android:layout_height="1dp"
        android:layout_below="@id/imgmenuicon"
    android:background="#000" />



<View
    android:contentDescription="@null"
    android:id="@+id/verticalline"
    android:layout_width="1dp"
    android:layout_toRightOf="@+id/horizontalline"
    android:layout_height="fill_parent"
    android:background="#4d4b56" />


</RelativeLayout>
<TextView
    android:id="@+id/tvmenutitle"
    android:layout_gravity="center_vertical|right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"

    android:text="Hello"
    android:textSize="18sp" />

试试这个让我知道!!!:D