android布局实践(一)home界面
1、主界面home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical" >
<!-- logo -->
<RelativeLayout
android:id="@+id/logo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_marginTop="6dp"
android:layout_marginBottom="4dp"
>
<ImageView
android:id="@+id/leiting_logo"
android:layout_width="@dimen/logo_width"
android:layout_height="@dimen/logo_height"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/logo"
/>
<ImageView
android:layout_width="@dimen/icon_size"
android:layout_height="@dimen/icon_size"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@drawable/left"
android:layout_marginLeft="15dp"
/>
<ImageView
android:layout_width="@dimen/icon_size"
android:layout_height="@dimen/icon_size"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/close"
android:layout_marginRight="15dp"
/>
</RelativeLayout>
<!-- 内容 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:layout_marginBottom="35dp"
>
<!-- 分隔符 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray"
>
</LinearLayout>
<!-- 内容 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="选择进入方式"
android:textColor="@color/text_color"
android:textSize="16sp"
/>
<!-- 四种方式 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginTop="10dp"
>
<!-- 忘记密码 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
android:background="@drawable/forget_pwd_bg" />
<ImageView
android:layout_centerInParent="true"
android:layout_width="@dimen/icon_size_login"
android:layout_height="@dimen/icon_size_login"
android:background="@drawable/lock_13" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_top_text_login"
android:text="忘记密码"
android:textColor="@color/black"
android:textSize="@dimen/text_size_login" />
</LinearLayout>
<!-- 一键注册 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
>
<ImageView
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
android:background="@drawable/register_bg" />
<ImageView
android:layout_centerInParent="true"
android:layout_width="@dimen/icon_size_login"
android:layout_height="@dimen/icon_size_login"
android:background="@drawable/phone_16_60" />
<ImageView
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_width="@dimen/icon_size_login_small"
android:layout_height="@dimen/icon_size_login_small"
android:background="@drawable/icon_38" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_top_text_login"
android:text="一键注册"
android:textColor="@color/black"
android:textSize="@dimen/text_size_login" />
</LinearLayout>
<!-- 已有账号登录 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
android:background="@drawable/register_ed_bg" />
<ImageView
android:layout_centerInParent="true"
android:layout_width="@dimen/icon_size_login"
android:layout_height="@dimen/icon_size_login"
android:background="@drawable/person_15_59" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_top_text_login"
android:text="已有账号登录"
android:textColor="@color/black"
android:textSize="@dimen/text_size_login" />
</LinearLayout>
<!-- 游客模式 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
android:gravity="center"
>
<ImageView
android:layout_width="@dimen/icon_size_login_bg"
android:layout_height="@dimen/icon_size_login_bg"
android:background="@drawable/visitor_bg" />
<ImageView
android:layout_centerInParent="true"
android:layout_width="@dimen/icon_size_login"
android:layout_height="@dimen/icon_size_login"
android:background="@drawable/lightning14_58" />
<ImageView
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_width="@dimen/icon_size_login_small"
android:layout_height="@dimen/icon_size_login_small"
android:background="@drawable/icon_38" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_top_text_login"
android:text="游客模式"
android:textColor="@color/black"
android:textSize="@dimen/text_size_login" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
2、数值
2.1 颜色 color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent_background">#50000000</color>
<color name="red">#FF0000</color>
<color name="white">#FFFFFF</color>
<color name="black">#000000</color>
<color name="text_color">#5997e2</color>
</resources>
2.2 值 dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="icon_size">20dp</dimen>
<!-- 登录界面图标尺寸 -->
<dimen name="icon_size_login_bg">50dp</dimen>
<dimen name="icon_size_login">40dp</dimen>
<dimen name="icon_size_login_press">55dp</dimen>
<dimen name="icon_size_login_small">15dp</dimen>
<!-- 登录界面文字大小 -->
<dimen name="margin_top_text_login">7dp</dimen>
<!-- 登录界面文字marginTop值 -->
<dimen name="text_size_login">14sp</dimen>
<!-- logo尺寸 -->
<dimen name="logo_width">150dp</dimen>
<dimen name="logo_height">30dp</dimen>
</resources>
3、图形
3.1 四个按钮
3.1.1 忘记密码 forget_pwd_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#ff5454"/>
<size android:width="@dimen/icon_size_login"
android:height="@dimen/icon_size_login"
/>
</shape>
3.1.2 一键注册 register_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#ccb05a"/>
<size android:width="@dimen/icon_size_login"
android:height="@dimen/icon_size_login"
/>
</shape>
3.1.3 已有账号登录 register_ed_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#5acc7d"/>
<size android:width="@dimen/icon_size_login"
android:height="@dimen/icon_size_login"
/>
</shape>
3.1.4 游客模式 visitor_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#478ce0"/>
<size android:width="@dimen/icon_size_login"
android:height="@dimen/icon_size_login"
/>
</shape>
代码中打开页面代码:
private void openHomeView(){
final AlertDialog dialog = new AlertDialog.Builder(LeitingActivityUtils.getActivity()).create();
dialog.show();
final Window window = dialog.getWindow();
window.setContentView(R.layout.home);
// 获取宽高
WindowManager wm = window.getWindowManager();
final int height = wm.getDefaultDisplay().getHeight();
final int width = wm.getDefaultDisplay().getWidth();
LayoutParams lp = window.getAttributes();
// 设置窗体的宽高
lp.height = (int)(height * 0.7);
lp.width = (int)(width * 0.7);
window.setAttributes(lp);
ImageView forgetPwd = (ImageView) window.findViewById(R.id.forget_pwd);
ImageView register = (ImageView) window.findViewById(R.id.regiser);
ImageView registeredLogin = (ImageView) window.findViewById(R.id.registered_login);
ImageView visitor = (ImageView) window.findViewById(R.id.visitor);
// 已有账号登录
registeredLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 打开已有账号登录界面
window.setContentView(R.layout.login);
}
});
}
成品展示:
还没有评论,来说两句吧...