如何自定义布局

时间:2014-08-22 07:34:38

标签: android xml android-layout

如何自定义FrameLayout,我必须像这样制作屏幕:

enter image description here

我已经做到了:

enter image description here

所以现在我想知道,How can i achieve above Layout

  1. 如何show icon on top,如上面的屏幕(路径

  2. 如何place text above circles,如上面的屏幕(Dark Text: 记住生活)(Light Text: 即时....

  3. 如何在圈子下面放置按钮,如上面的屏幕(注册& 登录

  4. 以下是我的XML,其中我使用FrameLayout,见下文:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    
        <com.indianic.viewflipperdemo.widget.ViewFlow
            android:id="@+id/viewflow"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            app:sidebuffer="3" >
        </com.indianic.viewflipperdemo.widget.ViewFlow>
    
        <com.indianic.viewflipperdemo.widget.CircleFlowIndicator
            android:id="@+id/viewflowindic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:padding="10dip"
            android:layout_marginBottom="10dip"
            app:inactiveType="stroke" />
    
    </FrameLayout>
    

3 个答案:

答案 0 :(得分:2)

最后,我实现了目标,我使用了both the Layouts [Relative LayoutLinear Layout]到organize widgets,请参阅完整的 XML

<强> circle_layout.xml: -

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

     <com.indianic.viewflipperdemo.widget.ViewFlow
        android:id="@+id/viewflow"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:sidebuffer="3" >
    </com.indianic.viewflipperdemo.widget.ViewFlow>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:text="Remember Life"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/viewflowindic"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:padding="5dp"
        android:text="Instantly search memories of friends, season, birthdays, and more"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp" >

        <Button
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center"
            android:layout_weight="1"
            android:text="Register"
            android:textColor="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:text="Login"
            android:textColor="#000000" />
    </LinearLayout>

    <com.indianic.viewflipperdemo.widget.CircleFlowIndicator
        android:id="@+id/viewflowindic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/linearLayout1"
        android:layout_centerHorizontal="true"
        android:padding="20dp"
        app:inactiveType="stroke" />

</RelativeLayout>

看看这个很棒的screenshot

enter image description here

答案 1 :(得分:1)

使用RelativeLayout而不是FrameLayout。你可以更自由地获得元素位置。

Relative Layout

像这样你可以做到这一点

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.indianic.viewflipperdemo.widget.ViewFlow
        android:id="@+id/viewflow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:sidebuffer="3" />

    <View
        android:id="@+id/center"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/center"
        android:padding="10dp"/>

    <Button
        android:id="@+id/button_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/center"
        android:padding="10dp"/>

    <com.indianic.viewflipperdemo.widget.ViewFlow
        android:id="@+id/viewflowindic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_register"
        android:layout_gravity="bottom|center_horizontal"
        android:padding="10dip"
        android:layout_marginBottom="10dip"
        app:inactiveType="stroke" />

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/viewflowindic"
        android:layout_centerHorizontal="true"
        android:text="description"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/description"
        android:layout_centerHorizontal="true"
        android:text="title"/>
</RelativeLayout>

btw使用match_parent而不是fill_parent。

答案 2 :(得分:0)

使用 RelativeLayout 组织视图。要实施查看寻呼机指示,请尝试此链接

https://github.com/JakeWharton/Android-ViewPagerIndicator

样品

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

    //You can put an image view or text view to show your app name

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Path"
        android:id="@+id/title"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="74dp"/>

    **// Try view pager indicator here.**

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:weightSum="2"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Register"
            android:layout_weight="1"
            android:id="@+id/button"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login"
            android:layout_weight="1"
            android:id="@+id/button2"/>
    </LinearLayout>
</RelativeLayout>