您的位置:首页 > 其它

安卓屏幕适配(各种方案组合)

2015-05-26 10:14 316 查看
本着分享技术的原则,写下这篇不是太完美的文章,希望能帮助到广大的android coder,一起共同进步

本来是不想写这些出处,图片加水印的,但是有些无良网站,直接爬虫抓文章的太可恶了,希望尊重别人的成果。

欢迎转载,但是转载请注明出处:http://blog.csdn.net/dinghqalex

以前对安卓屏幕适配这一块确实感觉蛋疼,始终做不好完美的适配

其实屏幕适配这块,还是需要一定的布局经验才能很好的适配出相对较好的界面

目前为止,我用到最多的还是Linearlayout和RelativeLayout。

Linearlayout通过layout_weight权重占屏幕的比例来控制控件的大小来控制控件在整个布局文件中的比例

我简单写了一个例子来使用这个layout_weight

<?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/bg"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >

<TextView
android:id="@+id/top_tv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/blue"
android:gravity="center"
android:text="上方文字控件"
android:textColor="@color/black"
android:textSize="30dp" />
</LinearLayout>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >

<TextView
android:id="@+id/bottom_tv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/green"
android:gravity="center"
android:text="下面文字控件"
android:textColor="@color/black"
android:textSize="30dp" />
</LinearLayout>

</LinearLayout>上面的布局代码可以看到,我这里就是简单的将节目分为上下两个部分,权重设置为1:1的比例,界面就分成了上下相等的两个部分,有兴趣的朋友可以将上下的权重改一改,改成2:1,3:1等等比例。

这个布局的效果是这样的



再来看一看2560*1600分辨率情况下的图片



可以看得到的是控件占比也是1:1的比例,没有因为分辨率的改变而控件发生了变化。

再来说说RelativeLayout,相对布局这个东西,我是经常将它的android:layout_marginLeft="20dp"这个属性(margin相关的)用来控制比例,还有就是相对布局中的相对于一个控件对齐等等属性用好,对齐边线,右对齐,居中对齐等等属性,用这些属性也可以对屏幕进行很好的适配。

我贴一个登录界面和布局代码,使用RelativeLayout的例子,希望朋友理解一下布局代码



布局的代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg"
android:orientation="vertical" >

<include layout="@layout/toolbar" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" >

<ImageView
android:id="@+id/login_logo"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="@drawable/login_logo" />

<EditText
android:id="@+id/login_account_edit"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_below="@+id/login_logo"
android:layout_marginTop="20dp"
android:background="@drawable/edit_bg"
android:ems="20"
android:focusable="true"
android:hint="@string/login_accountEditText"
android:inputType="text"
android:padding="10dp"
android:textColor="@color/text"
android:textColorHint="@color/hint_text_color"
android:textCursorDrawable="@drawable/cursor_shape"
android:textSize="15sp" />

<EditText
android:id="@+id/login_pwd_edit"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_below="@+id/login_account_edit"
android:layout_centerVertical="true"
android:layout_marginTop="20dp"
android:background="@drawable/edit_bg"
android:ems="20"
android:hint="@string/login_pwdEditText"
android:inputType="text"
android:padding="10dp"
android:textColor="@color/text"
android:textColorHint="@color/hint_text_color"
android:textCursorDrawable="@drawable/cursor_shape"
android:textSize="15sp" />

<Button
android:id="@+id/login_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_pwd_edit"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:background="@drawable/blue_btn_bg"
android:text="@string/login_btnText"
android:textColor="@color/white" />
</RelativeLayout>

</LinearLayout>

最后我把自己项目中的一个界面贴出来,希望通过布局文件能帮助到大家对屏幕适配这一块有一定的掌握和理解。

不好意思,涂了一点东西在界面图上,保密需要嘛,理解

下面是客户需要的界面



下面是我的布局界面



下面就是我的布局代码了

<?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/bg"
android:orientation="vertical" >

<include layout="@layout/toolbar" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="horizontal" >

<!-- 轮播图 -->

<ViewFlipper
android:id="@+id/hp_top_viewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

<!-- 上面的线性布局 上下比例为4:1 -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="3dp"
android:layout_weight="4"
android:orientation="horizontal" >

<!-- 上方左边的布局 -->

<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_weight="1"
android:orientation="vertical" >

<!-- 状态 -->

<LinearLayout
android:id="@+id/hp_states_lyt"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/green"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="状态"
android:textColor="@color/white"
android:textSize="20dp" />

<ImageButton
android:id="@+id/hp_states_imgBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/green"
android:src="@drawable/hp_states_icon" />
</LinearLayout>

<!-- 捡便宜 -->

<LinearLayout
android:id="@+id/hp_cheap_lyt"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/hp_getcheap"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:background="@color/lilac" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="捡便宜"
android:textColor="@color/white"
android:textSize="20dp" />
</LinearLayout>

<ImageButton
android:id="@+id/hp_cheap_imgBtn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/lilac"
android:src="@drawable/hp_cheap_icon" />
</LinearLayout>
</LinearLayout>

<!-- 上方右边的布局 -->

<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_weight="2"
android:orientation="vertical" >

<!-- 订单的布局 -->

<LinearLayout
android:id="@+id/hp_order_lyt"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:background="@color/yellow"
android:orientation="horizontal" >

<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" >

<ImageButton
android:id="@+id/hp_order_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="40dp"
android:background="@color/yellow"
android:src="@drawable/hp_order_icon" />

<TextView
android:id="@+id/hp_order_tip_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/hp_order_imgBtn"
android:layout_marginLeft="-15dp"
android:layout_toRightOf="@+id/hp_order_imgBtn" />
</RelativeLayout>

<!-- 订单 -->

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="订单"
android:textColor="@color/white"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>

<!-- 订单下方的布局 -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="3dp"
android:layout_weight="2"
android:orientation="horizontal" >

<!-- 左边一点的布局(验证和会员) -->

<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1.5"
android:orientation="vertical" >

<!-- 验证 -->

<LinearLayout
android:id="@+id/hp_verify_lyt"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/hp_verify"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/bottlegreen"
android:gravity="right" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="验证"
android:textColor="@color/white"
android:textSize="20dp" />
</LinearLayout>

<ImageButton
android:id="@+id/hp_verify_imgBtn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="@color/bottlegreen"
android:src="@drawable/hp_verify_icon" />
</LinearLayout>

<!-- 会员 -->

<LinearLayout
android:id="@+id/hp_vip_lyt"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/hp_vip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:background="@color/blue"
android:gravity="right" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="会员"
android:textColor="@color/white"
android:textSize="20dp" />
</LinearLayout>

<ImageButton
android:id="@+id/hp_vip_imgBtn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/blue"
android:src="@drawable/hp_vip_icon" />
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/hp_mine_lyt"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:background="@color/text"
android:orientation="vertical" >

<!-- 我的 -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/orange"
android:gravity="right" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="我的"
android:textColor="@color/white"
android:textSize="20dp" />
</LinearLayout>

<ImageButton
android:id="@+id/hp_mine_imgBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/orange"
android:src="@drawable/hp_mine_icon" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

<!-- 下面的线性布局 -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="3dp"
android:layout_weight="1"
android:orientation="horizontal" >

<!-- 评价 -->

<LinearLayout
android:id="@+id/hp_evaluate_lyt"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_weight="1.5"
android:background="@color/purple"
android:gravity="left" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="评价"
android:textColor="@color/white"
android:textSize="20dp" />

<ImageButton
android:id="@+id/hp_evaluate_imgBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="20dp"
android:background="@color/purple"
android:src="@drawable/hp_evaluate_icon" />
</LinearLayout>

<!-- 其他 -->

<LinearLayout
android:id="@+id/hp_other_lyt"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:background="@color/red" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="其它"
android:textColor="@color/white"
android:textSize="20dp" />

<ImageButton
android:id="@+id/hp_other_imgBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/red"
android:src="@drawable/hp_other_icon" />
</LinearLayout>
</LinearLayout>

</LinearLayout>

我想,希望认真看过这篇文章的朋友能理解到对屏幕适配的把握。
如果布局的界面很长,一个屏幕摆不下这些控件了,可以参考这篇文章:http://blog.csdn.net/dinghqalex/article/details/45742003
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息