android排字布局学习

android排版布局学习

android使用shape stroke描边只保留底部

 

 

一、项目粮仓

粮仓学习:

liangcang:

启动页面:act_start.xml

toolbar: widget_foot_main_rgs.xml    RadioButton

<RadioButton

        android:id="@+id/main_bottom_shop"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:button="@null"

        android:gravity="center"

android:text="@string/rb_shop"

        android:drawableTop="@drawable/slt_rb_shop"/>

 

        android:padding="8dp"

        android:textColor="@color/text_rb_main"

        android:textSize="14sp" />

  

登录:login.xml

登录注册选择页:login_register.xml

顶部搜索:layout_sliding_list_header.xml

顶部后退+分享:widget_special_title.xml

6个大图片:fmt_gift.xml

 

1、Login.xml页面:

效果图


 

分析:

全局 一个RelativeLayout

顶部返回+标题+关闭 一个RelativeLayout

中间用户名、密码分别一个RelativeLayout

忘记密码和底部的登录直接两个BUTTON

 

布局文件:

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

    <!-- 头部返回+标题+关闭 -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="27.199982dip">

        <ImageView
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="23.799988dip"
            android:src="@mipmap/back" />
        <!-- mipmap-xxhdpi里的back.png图片 -->

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="头部标题"
            android:textColor="@color/white"
            android:textSize="19.0sp" />

        <ImageView
            android:id="@+id/close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="23.799988dip"
            android:src="@mipmap/chahao" />

    </RelativeLayout>

    <!-- 用户名 -->
    <RelativeLayout
        android:id="@+id/username_layout"
        android:layout_width="fill_parent"
        android:layout_height="47.0dip"
        android:layout_marginLeft="35.799988dip"
        android:layout_marginRight="35.799988dip"
        android:layout_marginTop="83.79999dip"
        android:background="@drawable/stroke_white">
        <!--
        注意此处不是stroke_white.png图片,是在drawable文件夹中的stroke_white.xml文件
        内容见后面,设置的是用户名这行的外边框
        -->

        <ImageView
            android:id="@+id/icon_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:padding="12.0dip"
            android:src="@mipmap/icon_user" />

        <!-- 中间竖型分隔符 -->
        <View
            android:id="@+id/divider"
            android:layout_width="1.0dip"
            android:layout_height="30.0dip"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/icon_user"
            android:background="#ffffffff" />

        <EditText
            android:id="@+id/userName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10.0dip"
            android:layout_marginRight="10.0dip"
            android:layout_toRightOf="@+id/divider"
            android:background="@android:color/transparent"
            android:hint="@string/login_namehint"
            android:singleLine="true"
            android:text=""
            android:textColor="@color/white" />
    </RelativeLayout>


    <!-- 密码行 -->
    <RelativeLayout
        android:id="@+id/password_layout"
        android:layout_width="fill_parent"
        android:layout_height="47.0dip"
        android:layout_below="@+id/username_layout"
        android:layout_marginLeft="35.799988dip"
        android:layout_marginRight="35.799988dip"
        android:layout_marginTop="13.799988dip"
        android:background="@drawable/stroke_white">

        <ImageView
            android:id="@+id/icon_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:padding="12.0dip"
            android:src="@mipmap/icon_password" />

        <View
            android:id="@+id/divider2"
            android:layout_width="1.0dip"
            android:layout_height="30.0dip"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/icon_password"
            android:background="#ffffffff" />

        <EditText
            android:id="@+id/password"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10.0dip"
            android:layout_marginRight="10.0dip"
            android:layout_toRightOf="@+id/divider2"
            android:background="@android:color/transparent"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:drawableRight="@mipmap/eye_off"
            android:singleLine="true"
            android:text=""
            android:textColor="@color/white" />

        <!-- @android:color/transparent 为colors.xml文件中的transparent -->
    </RelativeLayout>

    <Button
        android:id="@+id/forgetPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/password_layout"
        android:layout_below="@+id/password_layout"
        android:layout_marginTop="13.799988dip"
        android:background="@null"
        android:text="忘记了密码?"
        android:textColor="#ffffffff" />
    <!-- android:background="@null" 表示背景透明 -->

    <Button
        android:id="@+id/login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_layout"
        android:layout_marginLeft="35.799988dip"
        android:layout_marginRight="35.799988dip"
        android:layout_marginTop="50.5dip"
        android:background="#ff25292e"
        android:padding="10.0dip"
        android:text="登录"
        android:textColor="#ffffffff"
        android:textSize="17.799988sp" />
</RelativeLayout>

 

stroke_white.xml文件内容:

<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1.1999817dip" android:color="#ffffffff" />
</shape>

 

2、login_register.xml页面 

可以先从底部排列,底部定位好后依次往上。

页面:


 

布局:

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

    <!-- 底部第三方登录
    改为RelativeLayout布局后图标缩到一块了
    -->
    <LinearLayout
        android:id="@+id/third_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="33.799988dip"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/loginApp_tencentQQ"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="17.799988dip"
            android:background="@null"
            android:scaleType="center"
            android:src="@mipmap/app_tencent_qq" />

        <ImageButton
            android:id="@+id/loginApp_weibo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="17.799988dip"
            android:background="@null"
            android:scaleType="center"
            android:src="@mipmap/app_weibo" />

        <ImageButton
            android:id="@+id/loginApp_Douban"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="17.799988dip"
            android:background="@null"
            android:scaleType="center"
            android:src="@mipmap/app_douban" />

        <ImageButton
            android:id="@+id/loginApp_tecentWeixin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:scaleType="center"
            android:src="@mipmap/app_tencent_weixin" />
    </LinearLayout>


    <TextView
        android:id="@+id/social_login_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/third_login"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="19.199982dip"
        android:text="社交账号登录:"
        android:textColor="#ffffffff"
        android:textSize="13.799988sp" />

    <Button
        android:id="@+id/login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/social_login_text"
        android:layout_marginBottom="27.199982dip"
        android:layout_marginLeft="35.799988dip"
        android:layout_marginRight="35.799988dip"
        android:background="#ff25292e"
        android:padding="10.0dip"
        android:text="登录"
        android:textColor="#ffffffff"
        android:textSize="17.799988sp" />

    <!-- 因为注册后面有个图标,所以得套个布局文件 -->
    <RelativeLayout
        android:id="@+id/register_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/login"
        android:layout_marginBottom="13.799988dip"
        android:layout_marginLeft="35.799988dip"
        android:layout_marginRight="35.799988dip">

        <Button
            android:id="@+id/register"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ffffffff"
            android:padding="10.0dip"
            android:text="注册"
            android:textColor="#ff333333"
            android:textSize="17.799988sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10.0dip"
            android:src="@mipmap/register_bonus" />
    </RelativeLayout>

    <!-- 注册上面哪行靠右小字 -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/register_layout"
        android:layout_alignRight="@+id/register_layout"
        android:layout_marginBottom="2.0dip"
        android:layout_marginRight="-7.5dip"
        android:src="@mipmap/register_bonus_tip" />

    <!-- LOGO图片 -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="130.0dip"
        android:scaleType="fitXY"
        android:src="@mipmap/icon_large" />

    <!-- 关闭 -->
    <ImageView
        android:id="@+id/close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="23.799988dip"
        android:layout_marginTop="27.199982dip"
        android:src="@mipmap/chahao" />
</RelativeLayout>

 。。

 

相关内容推荐