xamarin android布局

xamarin android布局练习（1）

xamarin android布局练习，基础非常重要，首先要学习的就是android的布局练习，xamarin也一样，做了几个xamarin android的布局例子，多练习几遍就能学会这个布局，当然有写css的学习这个android的布局很容易入门。

当你看到这篇文章的时候，你应该知道字体图标，下面很多图标都是直接从上面下载的，非常的牛逼，这个字体图标有必要科普一下，这个链接

字体图标下载

首先来看看要做成什么样子的

主要的关键点就是：gravity对其方式，relative布局， linear布局，width，height，orientation方向

代码：

<?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"
    android:background="#dedede"
    android:id="@+id/relativeLayout">
    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#c6c6c6"
        android:gravity="center">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="请登录"
            android:textSize="20sp"
            android:gravity="center"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:textColor="#808080" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linear1"
        android:orientation="vertical"
        android:id="@+id/linear2">
    <!--相对布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:clickable="true"
            android:id="@+id/linear3">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/xiaoxi"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/xiaoxi"
                android:textColor="@color/test_bg"
                android:gravity="center"
                android:textSize="30sp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp" />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#999999" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linear2"
        android:id="@+id/linear4"
        android:orientation="vertical"
        android:clickable="true">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/school"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="校园活动"
                android:textSize="30sp"
                android:textColor="#808080"
                android:gravity="center"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp" />
        </LinearLayout>
        <View
            android:layout_height="1dp"
            android:layout_width="match_parent"
            android:background="#999999" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linear4"
        android:clickable="true">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img1"
                android:src="@drawable/taobao"
                android:layout_gravity="center"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_marginLeft="10dp" />
            <TextView
                android:text="@string/taobao"
                android:textColor="@color/test_bg"
                android:textSize="30sp"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:gravity="center" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

xamarin android布局练习（2）

看看效果图2

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/linear1"
    android:orientation="vertical">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/linear2"
        android:orientation="vertical"
        android:background="#dedede">
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:textColor="#808080"
            android:textSize="20dp"
            android:text="如何使用xamarin布局练习"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp" />
        <RelativeLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/relative1">
            <ImageView
                android:id="@+id/imgCenter"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:layout_centerInParent="true"
                android:src="@drawable/taobao" />
            <ImageView
                android:id="@+id/imgLeft"
                android:layout_alignParentLeft="true"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@drawable/taobao1" />
            <ImageView
                android:id="@+id/imgRight"
                android:layout_alignParentRight="true"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@drawable/taobao1" />
        </RelativeLayout>
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:id="@+id/relative2">
            <TextView
                android:textColor="#999999"
                android:textSize="15dp"
                android:text="手机腾讯网"
                android:id="@+id/txt1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content" />
            <TextView
                android:textColor="#999999"
                android:textSize="15dp"
                android:text="评论  89"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="right" />
        </LinearLayout>
        <View
            android:layout_height="1dp"
            android:layout_width="match_parent"
            android:background="#808080" />
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/linear21"
        android:orientation="vertical"
        android:background="#dedede"
        android:layout_marginTop="10dp">
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:textColor="#808080"
            android:textSize="20dp"
            android:text="如何使用xamarin布局练习2"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp" />
        <RelativeLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/relative11">
            <ImageView
                android:id="@+id/imgCenter1"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:layout_centerInParent="true"
                android:src="@drawable/taobao" />
            <ImageView
                android:id="@+id/imgLeft1"
                android:layout_alignParentLeft="true"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@drawable/taobao1" />
            <ImageView
                android:id="@+id/imgRight1"
                android:layout_alignParentRight="true"
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@drawable/taobao1" />
        </RelativeLayout>
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:id="@+id/relative21">
            <TextView
                android:textColor="#999999"
                android:textSize="15dp"
                android:text="手机腾讯网"
                android:id="@+id/txt11"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content" />
            <TextView
                android:textColor="#999999"
                android:textSize="15dp"
                android:text="评论  89"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="right" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

主要的关键点在于:relative布局，

 android:layout_alignParentLeft="true"

这个属性非常重要，在父容器中的对其方式，bool类型的。layout_alignParentLeft="true"在父容器中左对齐

xamarin android布局练习（3）

效果图:

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/relative"
    android:background="#dedede">
    <ImageView
        android:layout_height="64dp"
        android:layout_width="64dp"
        android:id="@+id/imgCenter"
        android:src="@drawable/taobao"
        android:layout_centerInParent="true" />
    <ImageView
        android:layout_height="64dp"
        android:layout_width="64dp"
        android:id="@+id/imgTop"
        android:src="@drawable/wangwang"
        android:layout_above="@+id/imgCenter"
        android:layout_centerHorizontal="true" />
    <ImageView
        android:layout_height="64dp"
        android:layout_width="64dp"
        android:id="@+id/imgRight"
        android:src="@drawable/suning"
        android:layout_toRightOf="@+id/imgCenter"
        android:layout_centerVertical="true" />
    <ImageView
        android:layout_height="64dp"
        android:layout_width="64dp"
        android:id="@+id/imgLeft"
        android:src="@drawable/suning"
        android:layout_toLeftOf="@+id/imgCenter"
        android:layout_centerVertical="true" />
    <ImageView
        android:layout_height="64dp"
        android:layout_width="64dp"
        android:id="@+id/imgBottom"
        android:src="@drawable/jingsong"
        android:layout_below="@+id/imgCenter"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

关键点在于如何使用relative的各种对其方式

xamarin android布局练习简单的登录（4）

效果如下：

只用了一个linear布局

<?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:background="@color/loginBgColor">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/linear1"
        android:orientation="vertical">
        <TextView
            android:id="@+id/txt"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_marginBottom="30dp"
            android:layout_marginRight="30dp"
            android:layout_gravity="right"
            android:text="设备登录"
            android:textColor="@color/whiteColor"
            android:textSize="20dp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear2"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/txt2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:textSize="30dp"
            android:textColor="@color/whiteColor"
            android:layout_gravity="center"
            android:text="LOGO"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">
        <EditText
            android:id="@+id/txtUserName"
            android:background="@color/whiteColor"
            android:hint="请输入用户名"
            android:focusable="true"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textSize="20dp"
            android:textColor="#000000"
            android:paddingLeft="10dp"
            android:textCursorDrawable="@null" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dedede" />
        <EditText
            android:id="@+id/txtPassword"
          android:background="@color/whiteColor"
            android:hint="请输入密码1"
            android:textCursorDrawable="@null"
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textSize="20dp"
            android:paddingLeft="10dp"
            android:textColor="#000000" />
        <Button
            android:id="@+id/btnLogin"
            android:text="登录"
            android:layout_height="50dp"
            android:layout_width="match_parent"
            android:textColor="@color/whiteColor"
            android:background="#2894FF"
            android:textSize="20dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:layout_marginTop="20dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/linear5">
        <CheckBox
            android:id="@+id/checkbox_remeberUser"
            android:layout_height="30dp"
            android:layout_width="30dp"
            android:textColor="#336699"
            android:textColorHighlight="#336699" />
        <TextView
            android:id="@+id/remeberUser"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="记住该用户"
            android:textColor="#FFFFFF"
            android:textSize="16dp" />
    </LinearLayout>
</LinearLayout>