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>
<?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>
<?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"
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>
<?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的各种对其方式
![](https://i-blog.csdnimg.cn/blog_migrate/b2f3ec31c8559aa4c1176d6e5a5b9c4d.jpeg)
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>
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>
<?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布局,<?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>
- android:layout_alignParentLeft="true"
这个属性非常重要,在父容器中的对其方式,bool类型的。layout_alignParentLeft="true"在父容器中左对齐android: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>
<?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>