使用FrameLayout+ScrollView+RelativeLayout嵌套布局，实现仿Windows Phone

来源：互联网发布：好看编程图片编辑：程序博客网时间：2024/05/02 04:57

首先看一下效果图：

嵌套布局

其实是可以滚动的，下面未显示的图标，只是动画我还不太会做，在这里就放上一张静态图吧。
并且下拉的时候，背后有图片显示出来，我这里用的是文本代替：

下拉效果

首先申明我是模仿的一款叫掌上校园APP的布局样式，很明显这很类似windows phone的界面，界面清新大方，简单明了。闲话少说，下面看我的布局思路：
拿到这张图，我首先考虑是用FrameLayout，因为布局被分为了两层，底层用于显示背后的文本信息，上一层用于显示图标信息；然后考虑到拖动效果，要不就是用动画实现的，监听手指拖动事件，要不就是用了一个ScrollView；最后来看图标排列方式，最起初我考虑应该用线性布局来实现，因为很明显如果横着看界面被分成了两排，竖着看每个图标所占的比例不同，所以实现起来只需要设计好排列方向android:orientation=”horizontal”或者”vertical”，然后设计每个ImageView的android:layout_weight=”“即可。并且线性布局可是做到多种屏幕尺寸的适配，所以一开始用了FrameLayout+ScrollView+LinearLayout：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="top|center_horizontal"        android:text="山东科技大学" />    <ScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:overScrollMode="always"        android:scrollbars="none" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_margin="1dp"            android:background="#FFFFFF"            android:orientation="vertical"            android:weightSum="5" >            <ImageView                android:id="@+id/a"                android:layout_width="match_parent"                android:layout_height="100dp"                android:layout_margin="2.5dp"                android:layout_weight="1"                android:scaleType="fitXY"                android:src="@drawable/aaa" />            <LinearLayout                android:layout_width="match_parent"                android:layout_height="0dp"                android:layout_weight="4"                android:orientation="horizontal" >                <LinearLayout                    android:layout_width="0dp"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:orientation="vertical"                    android:weightSum="8" >                    <ImageView                        android:id="@+id/b"                        android:layout_width="match_parent"                        android:layout_height="10dp"                        android:layout_margin="2.5dp"                        android:layout_weight="2.75"                        android:background="@drawable/bbb"                        android:scaleType="fitXY"                        android:src="@drawable/bbb" />                    <ImageView                        android:id="@+id/d"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="1.25"                        android:scaleType="fitXY"                        android:src="@drawable/ddd" />                    <ImageView                        android:id="@+id/f"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="2.75"                        android:scaleType="fitXY"                        android:src="@drawable/fff" />                    <ImageView                        android:id="@+id/h"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="1.25"                        android:scaleType="fitXY"                        android:src="@drawable/hhh" />                </LinearLayout>                <LinearLayout                    android:layout_width="0dp"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:orientation="vertical" >                    <ImageView                        android:id="@+id/c"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="1.25"                        android:scaleType="fitXY"                        android:src="@drawable/ccc" />                    <ImageView                        android:id="@+id/e"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="2.75"                        android:scaleType="fitXY"                        android:src="@drawable/eee" />                    <ImageView                        android:id="@+id/g"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="1.25"                        android:scaleType="fitXY"                        android:src="@drawable/ggg" />                    <ImageView                        android:id="@+id/i"                        android:layout_width="match_parent"                        android:layout_height="0dp"                        android:layout_margin="2.5dp"                        android:layout_weight="2.75"                        android:scaleType="fitXY"                        android:src="@drawable/iii" />                </LinearLayout>            </LinearLayout>        </LinearLayout>    </ScrollView></FrameLayout>

效果图：

这里写图片描述

发现图标被莫名的拉伸，即使把android:scaleType=”fitXY”改成“CenterInside”等等都不管用，可以看到最上面那个ImageView设置了高度android:layout_height=”100dp”，它的显示是正常的，但是其他的都被拉伸了，我总不能都设置高度吧，这就失去了线性布局的意义了。之后在网上各种查，尝试反编译原APP，但是失败。知道现在还是不明白为什么达不到预想的效果，ScrollView中嵌套了LinearLayout，LinearLayout中包含了ImageView，可是我始终不能调整ImageView的高度，导致ScrollView太长图片被拉伸，希望有大神给我看看是啥错误。
无奈之下，我想起了我不太常用的相对布局，我之前一直以为线性布局是强大的，遇到的界面用线性布局几乎都能解决。试了一下，不到十分钟，竟然效果出来了，嘎嘎

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="top|center_horizontal"        android:text="山东科技大学" />    <ScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fillViewport="true"        android:overScrollMode="always"        android:scrollbars="none" >        <!-- 相对布局测试 -->        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_margin="2dp"            android:background="#FFFFFF" >            <ImageView                android:id="@+id/aaa"                android:layout_width="match_parent"                android:layout_height="120dp"                android:layout_margin="2dp"                android:scaleType="fitXY"                android:src="@drawable/aaa" />            <View                android:id="@+id/fenge"                android:layout_width="0.1dp"                android:layout_height="fill_parent"                android:layout_below="@id/aaa"                android:layout_centerHorizontal="true"                android:background="#FFFFFF" />            <ImageView                android:id="@+id/bbb"                android:layout_width="match_parent"                android:layout_height="180dp"                android:layout_below="@id/aaa"                android:layout_margin="2dp"                android:layout_toLeftOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/bbb" />            <ImageView                android:id="@+id/ccc"                android:layout_width="match_parent"                android:layout_height="90dp"                android:layout_below="@id/aaa"                android:layout_margin="2dp"                android:layout_toRightOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/ccc" />            <ImageView                android:id="@+id/ddd"                android:layout_width="match_parent"                android:layout_height="90dp"                android:layout_below="@id/bbb"                android:layout_margin="2dp"                android:layout_toLeftOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/ddd" />            <ImageView                android:id="@+id/eee"                android:layout_width="match_parent"                android:layout_height="180dp"                android:layout_below="@id/ccc"                android:layout_margin="2dp"                android:layout_toRightOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/eee" />            <!-- 第二阶梯 -->            <ImageView                android:id="@+id/fff"                android:layout_width="match_parent"                android:layout_height="180dp"                android:layout_below="@id/ddd"                android:layout_margin="2dp"                android:layout_toLeftOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/fff" />            <ImageView                android:id="@+id/ggg"                android:layout_width="match_parent"                android:layout_height="90dp"                android:layout_below="@id/eee"                android:layout_margin="2dp"                android:layout_toRightOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/ggg" />            <ImageView                android:id="@+id/hhh"                android:layout_width="match_parent"                android:layout_height="90dp"                android:layout_below="@id/fff"                android:layout_margin="2dp"                android:layout_toLeftOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/ggg" />            <ImageView                android:id="@+id/iii"                android:layout_width="match_parent"                android:layout_height="180dp"                android:layout_below="@id/ggg"                android:layout_margin="2dp"                android:layout_toRightOf="@id/fenge"                android:scaleType="fitXY"                android:src="@drawable/iii" />        </RelativeLayout>    </ScrollView></FrameLayout>

效果就是之前看到的了，看来关键时刻转变一下思维也是很重要滴啊！

0 0