Question

我是Android开发的新手。我想创建类似于我在链接中提供的图像的布局。

我想在我的Android应用程序中创建的布局图像，点击下面的链接查看。

http://i.stack.imgur.com/nv2TH.gif

这是我写的布局，但尚未达到所提供图像的标准。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/anim"
    android:scaleType="centerCrop" />

<TextView
    android:id="@+id/musicTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:text="Music Title"
    android:textColor="#FFFFFF"
    android:textSize="20sp" />

<TextView
    android:id="@+id/musicArtistName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/musicTitle"
    android:layout_centerHorizontal="true"
    android:text="Singer Name - Artist Here"
    android:textColor="#FFFFFF"
    android:textSize="14sp" />

我如何创建这种类型的xml布局。我想知道如何实现这个？谢谢。

Answer 1

尝试下面的想法是制作一个带有权重和的布局，并给每个孩子一部分权重

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="4">

        <RelativeLayout
            android:id="@+id/relativeLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/banner_broken_image"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/musicTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:text="Music Title"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/musicArtistName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/musicTitle"
            android:layout_centerHorizontal="true"
            android:text="Singer Name - Artist Here"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.5"
            android:background="@android:color/white"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:background="@android:color/black"/>

    </>

Answer 2

在Android中设计布局时，您需要了解必须使用的视图。

在您链接的图片中，从上到下依次为：

ImageView，与其他人一起使用TextView
自定义视图，您需要实现自己的或搜索库，这代表声音
LinearLayout（水平），带3个按钮（图像按钮），播放器的控件
ProgressBar在开始和结束时有2个TextView，歌曲的进度
底部导航栏

希望此分析可以帮助您现在和下次看到布局！

如何创建类似于android中链接提供的图像的布局

2 个答案: