android开发界面使用综合布局

2019-02-19 10:44:03 zh724738989 阅读数 3243

Android 仿微信之主页面实现篇
Android 仿微信之界面导航篇
Android 高仿QQ 好友分组列表
Android 高仿QQ 界面滑动效果
Android 高仿QQ 登陆界面
Android 对Path的旋转效果的拓展
Android高仿360安全卫士布局源码
Android SlidingDrawer 滑动抽屉效果
Android仿微信UI设计源码
Android实现左右窗口的滑动效果源码
Android中自定义实现高德地图图层效果源码
Android画廊视图的3D效果
Android精美UI源码(涉及滑动控制、速度控制、各种布局、自定义组件)
Android唯美简单的图片切换源码(可以当广告)
Android中使用GridView实现标签效果源码
Android多层抽屉效果源码
Android SMS 短信内容显示在一个 泡泡 形状的窗口中
Android类Path布局的应用源码
Android软键盘弹出动态改变UI布局(IM聊天窗口设计示例)
Android高仿微信导航页效果源码
Android仿UCWEB界面源码
Android透明菜单源码
Android高仿优酷圆盘旋转菜单 的实现代码
Android实现《天女散花》效果源码
Android下仿WP7 Metro界面源码
Android下高手仿的网易滑动源码
Android类网易新闻首页源码
Android仿iphone4抖动效果源码
Android泡泡聊天界面的实现
Android 随手势进行3D旋转的源码
Android安卓手机仿苹果手机真实书籍翻页效果
Android具有朴素UI的城市天气预报源码
Android启动闪屏,TabActivity, Tab切换图片,新浪微博练习
Android仿快播搜索框上方悬浮的文字搜索
Android中可拖动的浮动框实现源码
Android的烟花实现源码
Android smart漂亮时钟源代码
Android下实现uc和墨迹天气那样的左右拖动效果源码
Android中使用gallery实现标签效果源码
Android TabHost底部菜单(类似iphone)
Android适合新手学习的左右拖拽的菜单布局
Android一个触摸界面会产生汽泡效果的例子
水果忍者刀锋在android上的实现(只是刀锋,不是整个项目)
使用赛贝尔曲线的电子书,可以随意翻卷
OpenGL实现Ophone3D效果特效源码
Android下水波效应源码

2018-01-26 11:48:04 jongde1 阅读数 10255



根据调查显示, iOS与Android的市场份额差距正越来越大。Android设备正在成为手机应用市场的主力军。如何从设计层面创造一个优美的app界面来吸引用户已然成为广大App开发者们必做的功课之一。

尽管苹果的扁平化设计风格在这几年出尽了风头,但Material design主导下的Android应用界面设计也是非常值得设计师学习和重视的。以下是Mockplus(摩客)为大家整理的一些界面设计非常优秀的安卓应用。

1. Eye In Sky Weather

 

与iOS一样,谷歌Play商店中也有大量的天气应用。Eye in Sky Weather以其简约,全息主题和用户所期待的天气应用程序应有的基本功能而脱颖而出。该应用程序包括14个最好的天气图标集,可以添加自己的图标集。还有四个高度可定制的小部件和一个可扩展的通知,还有一个DashClock扩展。

2. Snapseed


Snapseed是Google提供的综合照片编辑应用程序。除了拥有Instagram提供的基本编辑功能之外,Snapseed的这种编辑模式使得照片编辑变得前所未有的简单。许多照片编辑应用程序的编辑过程都显得非常笨重,但Snapseed保持简单风格的同时还提供了很多可轻松调整的选项。

当然,你可以改变灯光和添加滤镜,但重新聚焦图像和改变胶片风格的能力使得他们的工具箱是独一无二的。最后,根据您之前制作的节省,重新编辑的能力使得这个应用程序成为我最喜欢的照片编辑器。

3. YouTube


作为全球最大的视频共享网站,YouTube自2005年成立以来一直受益于他们的智能设计。同样的灵感贯穿到今天,并且可以看到移动应用程序易于使用的服务。

同样,虽然YouTube不是专门的移动应用程序,但YouTube视频中超过一半的视图都是通过移动设备完成的。 2017年这样的应用程序的必要性是非常明显的。

YouTube在保持设计的可访问性和新鲜度方面做得很好,每两周更新一次应用程序,并使设计适应它们对平台所做的更改。事实上,大多数用户也更喜欢移动版本。

4. Pinterest


Pinterest可以说是最美Android应用程序设计的竞争者之一。 从详细的注册流程到照片的全面展示,Pinterest为用户界面添加了足够的细节,使图片和内容保持在中心位置。

5.  Trello


Trello是一个项目管理和组织工具,主要工作是他们所谓的“看板”。每个看板可以对应不同的任务或责任,需要完成。 简单而明显的设计使得工作可以更快地完成,并减少了各方之间的交流错误。

Trello是一个很好的用户体验设计的案例,因为它没有太多不必要的功能。 应用程序主屏幕上的所有内容都很容易理解,并且完全按照应用程序的方式工作,不会对任何从一个板到另一个板的任务产生任何困惑。 界面设计非常直观,第一次使用应用程序的用户可以轻松浏览不同的页面。

6. Slack


Slack是适合各种团队的沟通工具。 无论是计划一个事件,从事某个项目,还是只是厌倦了电子邮件,Slack正在成为专业人士之间使用最广泛的工具之一。 这个成功的关键原因是他们简单而强大的设计。

虽然Slack不是专门的移动应用程序,但他在移动设备上的用户体验并不比在计算机上使用差。您需要的所有内容都非常清晰地放在左侧的下拉菜单中,而团队Feed始终在应用程序的主要区域进行更新。

7. Duolingo 


Duolingo是一家语言学习公司,教导用户如何通过迷你游戏和简短的课程讲不同的语言。 该公司成立于2009年,已经达到1亿用户,并且一直在持续增长中,主要是由于他们的应用程序非常简单,技术也在不断的创新。

任何使用Duolingo的人都能理解应用程序的简单性。 通过完成一个任务或游戏,您可以转到更高级的类别。 结合移动游戏应用程序的成瘾性,并使用它来学习新的语言也是一个很棒的主意,在此基础上的用户体验也是吸引用户的因素之一。

8.Wickr


与许多有效的移动应用程序UI设计一样,Wickr非常简单。 它可以完美地处理安全的消息,同时保持其基本的黑色和白色的设计。 无论用户是出于商业还是个人目的选择,都是安全发送加密消息的有效方式。 它具有群组消息功能,以及一对一的通信。 信息发送者可以控制消息,图像或视频可以被查看多长时间。 像Snapchat的消息只能显示1-10秒钟,随着时间的推移,它会数字化地“碎片化”已删除的消息。

9. Hipmunk


Hipmunk是计划旅行的最快,最简单的方法。 这个程序将通过比较所有的顶级旅游网站节省您的时间,包括设置您想要前往某一天的目的地的提醒,查看其他乘客的评论,预订航班,根据您想要最接近的目的搜索酒店房间等等。

我真正喜欢它的设计方面是,它可以根据您的需求,例如基于卡片布局的城市访问,或适合某个预算的酒店的最佳时间)量身定制您的视图。 这是一个真正可定制的预订旅行安排的应用。

10. PEAR Sports


PEAR是一款个性化的健身应用程序,集合了数以千计的锻炼与私人教练。 这个应用程序可以对用户的健康数据做出实时反应,以适应用户的具体需求的锻炼。比如跑步,骑自行车和举重训练,并根据你的选择对你进行实时鼓励。 它与所有主要的健身追踪器和应用程序同步,以保持所有的锻炼数据易于管理。 最重要的是,你可以随心所欲地打开或关闭手机。 如果您正在做瑜伽或其他需要双手的东西,您的私人教练可以纯粹通过音频来指导。 例如,如果您在跑步机上跑步,则会提供有用的心率图形,燃烧的卡路里以及总体进度。 总的来说,这是一个非常有用的应用程序,考虑到个性的健身,以及其可定制的功能和设计。

更多UI设计资源

1. developer.android

作为安卓开发者,可以参考Google的Android Design规范,官方对于如何做好Android App的UI设计一直有着很多的导引和建议。

2. Github

Github的UI设计板块收集了很多设计相关的素材和优秀设计站点。不仅仅限于Android应用界面设计。

视频教程

1.How to Design Android UI/GUIs in Android Studio

这个视频向Eclipse用户解释如何使用Android Studio为你的应用程序创建图形用户界面。 视频很长(接近一个小时),但流程逻辑上很容易。

2. Android UI Tutorial: Layouts and Animations

Android UI布局和动画的最佳教程之一。 它教你如何使用Android Studio创建不同的布局(框架布局,线性布局,相对布局和网格布局),视图(TextView,ListView,ImageView,GridView,RecyclerView)和动作(属性动画,可绘制动画)。 本教程适用于初学者和高级设计人员,并且可以在GitHub上使用该项目。

关于原型设计

一个应用的设计风格基调奠定我认为是从原型设计开始的。在App的原型设计阶段,UI元素的选择和使用是设计师需要慎重把握的。在工具选择方面可以根据安卓应用的特点尽量使用Mockplus或者Justinmind这类偏向于Material design风格的设计工具。

2019-05-13 10:15:58 taoerchun 阅读数 1006

转载于:https://www.cnblogs.com/caobotao/p/5103673.html

在平时的Android开发中,我们经常会使用Tab来进行主界面的布局。由于手机屏幕尺寸的限制,合理使用Tab可以极大的利用屏幕资源,给用户带来良好的体验。学会Tab的使用方法已经成为学习Android开发必不可少的技能了。我们经常使用的微信、QQ就是使用Tab的方式进行主界面的布局的。

  

下面我们通过三种方式实现旧版的微信主界面以演示Tab的使用方式。

最终效果:

第一种:单纯使用ViewPager

MainActivity.java

public class MainActivity extends Activity implements OnClickListener {
    //声明ViewPager
    private ViewPager mViewpager;

    //声明四个Tab
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    //声明四个ImageButton
    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    //声明ViewPager的适配器
    private PagerAdapter mAdpater;
    //用于装载四个Tab的List
    private List<View> mTabs = new ArrayList<View>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉TitleBar
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();//初始化控件
        initDatas();//初始化数据
        initEvents();//初始化事件

    }

    private void initEvents() {
        //设置四个Tab的点击事件
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

        //添加ViewPager的切换Tab的监听事件
        mViewpager.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //获取ViewPager的当前Tab
                int currentItem = mViewpager.getCurrentItem();
                //将所以的ImageButton设置成灰色
                resetImgs();
                //将当前Tab对应的ImageButton设置成绿色
                switch (currentItem) {
                    case 0:
                        mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
                        break;
                    case 1:
                        mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
                        break;
                    case 2:
                        mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
                        break;
                    case 3:
                        mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initDatas() {
        //初始化ViewPager的适配器
        mAdpater = new PagerAdapter() {
            @Override
            public int getCount() {
                return mTabs.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mTabs.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mTabs.get(position));
            }
        };
        //设置ViewPager的适配器
        mViewpager.setAdapter(mAdpater);
    }

    //初始化控件
    private void initViews() {
        mViewpager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);

        //获取到四个Tab
        LayoutInflater inflater = LayoutInflater.from(this);
        View tab1 = inflater.inflate(R.layout.tab1, null);
        View tab2 = inflater.inflate(R.layout.tab2, null);
        View tab3 = inflater.inflate(R.layout.tab3, null);
        View tab4 = inflater.inflate(R.layout.tab4, null);

        //将四个Tab添加到集合中
        mTabs.add(tab1);
        mTabs.add(tab2);
        mTabs.add(tab3);
        mTabs.add(tab4);

    }

    @Override
    public void onClick(View v) {
        //先将四个ImageButton都设置成灰色
        resetImgs();
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                //设置viewPager的当前Tab
                mViewpager.setCurrentItem(0);
                //将当前Tab对应的ImageButton设置成绿色
                mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
                break;
            case R.id.id_tab_frd:
                mViewpager.setCurrentItem(1);
                mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
                break;
            case R.id.id_tab_address:
                mViewpager.setCurrentItem(2);
                mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
                break;
            case R.id.id_tab_setting:
                mViewpager.setCurrentItem(3);
                mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
                break;
        }
    }

    //将四个ImageButton设置成灰色
    private void resetImgs () {
        mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);
        mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);
        mAddressImg.setImageResource(R.mipmap.tab_address_normal);
        mSettingImg.setImageResource(R.mipmap.tab_settings_normal);
    }
}

 

顶部布局文件

top.xm

 

 

四个Tab对应页面的布局文件

tabl1.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

 

tab2.xml

 

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

 

tab3.xm

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

tab4.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

底部布局文件

bottom.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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通讯录"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="设置"/>
    </LinearLayout>

</LinearLayout>

主布局文件

<?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">
    <include layout="@layout/top"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

 

完整源码 : 点击下载

单纯使用ViewPager的方式可以实现左右滑动切换页面和点击Tab切换页面的效果。但是大家发现,这种方式需要在Activity完成所有的代码实现,包括初始化Tab及其对应页面的初始化控件、数据、事件及业务逻辑的处理。这样会使得Activity看起来非常臃肿,进而造成代码的可读性和可维护性变得极差。

谷歌在Android 3.0时推出了Fragment。可以分别使用Fragment来管理每个Tab对应的页面的布局及功能的实现。然后将Fragment与Android关联,这样Android只需要管理Fragment就行了,起到了调度器的作用,不再关心每个Fragment里的内容及功能实现是什么。这样就极大的解放了Activity,使代码变得简单、易读。

下面我们通过使用Fragment的方式来实现Tab。

第二种:单纯使用Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener {
    //声明四个Tab的布局文件
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    //声明四个Tab的ImageButton
    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    //声明四个Tab分别对应的Fragment
    private Fragment mFragWeinxin;
    private Fragment mFragFrd;
    private Fragment mFragAddress;
    private Fragment mFragSetting;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();//初始化控件
        initEvents();//初始化事件
        selectTab(0);//默认选中第一个Tab
    }

    private void initEvents() {
        //初始化四个Tab的点击事件
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initViews() {
        //初始化四个Tab的布局文件
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        //初始化四个ImageButton
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
    }

    //处理Tab的点击事件
    @Override
    public void onClick(View v) {
        //先将四个ImageButton置为灰色
        resetImgs();
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                selectTab(0);//当点击的是微信的Tab就选中微信的Tab
                break;
            case R.id.id_tab_frd:
                selectTab(1);
                break;
            case R.id.id_tab_address:
                selectTab(2);
                break;
            case R.id.id_tab_setting:
                selectTab(3);
                break;
        }

    }

    //进行选中Tab的处理
    private void selectTab(int i) {
        //获取FragmentManager对象
        FragmentManager manager = getSupportFragmentManager();
        //获取FragmentTransaction对象
        FragmentTransaction transaction = manager.beginTransaction();
        //先隐藏所有的Fragment
        hideFragments(transaction);
        switch (i) {
            //当选中点击的是微信的Tab时
            case 0:
                //设置微信的ImageButton为绿色
                mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
                //如果微信对应的Fragment没有实例化,则进行实例化,并显示出来
                if (mFragWeinxin == null) {
                    mFragWeinxin = new WeixinFragment();
                    transaction.add(R.id.id_content, mFragWeinxin);
                } else {
                    //如果微信对应的Fragment已经实例化,则直接显示出来
                    transaction.show(mFragWeinxin);
                }
                break;
            case 1:
                mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
                if (mFragFrd == null) {
                    mFragFrd = new FrdFragment();
                    transaction.add(R.id.id_content, mFragFrd);
                } else {
                    transaction.show(mFragFrd);
                }
                break;
            case 2:
                mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
                if (mFragAddress == null) {
                    mFragAddress = new AddressFragment();
                    transaction.add(R.id.id_content, mFragAddress);
                } else {
                    transaction.show(mFragAddress);
                }
                break;
            case 3:
                mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
                if (mFragSetting == null) {
                    mFragSetting = new SettingFragment();
                    transaction.add(R.id.id_content, mFragSetting);
                } else {
                    transaction.show(mFragSetting);
                }
                break;
        }
        //不要忘记提交事务
        transaction.commit();
    }

    //将四个的Fragment隐藏
    private void hideFragments(FragmentTransaction transaction) {
        if (mFragWeinxin != null) {
            transaction.hide(mFragWeinxin);
        }
        if (mFragFrd != null) {
            transaction.hide(mFragFrd);
        }
        if (mFragAddress != null) {
            transaction.hide(mFragAddress);
        }
        if (mFragSetting != null) {
            transaction.hide(mFragSetting);
        }
    }

    //将四个ImageButton置为灰色
    private void resetImgs() {
        mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);
        mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);
        mAddressImg.setImageResource(R.mipmap.tab_address_normal);
        mSettingImg.setImageResource(R.mipmap.tab_settings_normal);
    }
}

“微信”、“朋友”、“通讯录”、“设置”所对应的Fragment

WeixinFragment.java

public class WeixinFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

 

FrdFragmen.java

public class FrdFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab2, container, false);
        return view;
    }
}

AddressFragmen.java

public class AddressFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab3, container, false);
        return view;
    }
}

SettingFragment.java

public class SettingFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab4, container, false);
        return view;
    }
}

顶部布局文件

top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:background="@android:drawable/title_bar"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="45dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

四个Tab对应页面的布局文件

tab1.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

tab2.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

 

tab3.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

 

tab4.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

 

底部布局文件

bottom.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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通讯录"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="设置"/>
    </LinearLayout>

</LinearLayout>

 

主布局文件

<?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">
    <include layout="@layout/top"/>

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/bottom"/>
</LinearLayout>

 

完整源码 : 点击下载

可以看出,使用Fragment实现了Activity与Tab对应的页面分离,特别是当Tab对应的页面的布局和逻辑比较复杂时更能体会到使用Fragment的好处。但是单纯使用Fragment只能通过点击Tab来切换页面,并不能实现左右滑动进行切换。

下面我们通过使用 ViewPager + Fragment 的方式实现Tab,这也是开发中使用比较广泛的一种方式。

第三种:使用 ViewPager + Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener {
    //声明ViewPager
    private ViewPager mViewPager;
    //适配器
    private FragmentPagerAdapter mAdapter;
    //装载Fragment的集合
    private List<Fragment> mFragments;

    //四个Tab对应的布局
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    //四个Tab对应的ImageButton
    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSetting;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();//初始化控件
        initEvents();//初始化事件
        initDatas();//初始化数据
    }

    private void initDatas() {
        mFragments = new ArrayList<>();
        //将四个Fragment加入集合中
        mFragments.add(new WeixinFragment());
        mFragments.add(new FrdFragment());
        mFragments.add(new AddressFragment());
        mFragments.add(new SettingFragment());

        //初始化适配器
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {//从集合中获取对应位置的Fragment
                return mFragments.get(position);
            }

            @Override
            public int getCount() {//获取集合中Fragment的总数
                return mFragments.size();
            }

        };
        //不要忘记设置ViewPager的适配器
        mViewPager.setAdapter(mAdapter);
        //设置ViewPager的切换监听
        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            //页面滚动事件
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            //页面选中事件
            @Override
            public void onPageSelected(int position) {
                //设置position对应的集合中的Fragment
                mViewPager.setCurrentItem(position);
                resetImgs();
                selectTab(position);
            }

            @Override
            //页面滚动状态改变事件
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initEvents() {
        //设置四个Tab的点击事件
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

    }

    //初始化控件
    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
        mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);

    }

    @Override
    public void onClick(View v) {
        //先将四个ImageButton置为灰色
        resetImgs();

        //根据点击的Tab切换不同的页面及设置对应的ImageButton为绿色
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                selectTab(0);
                break;
            case R.id.id_tab_frd:
                selectTab(1);
                break;
            case R.id.id_tab_address:
                selectTab(2);
                break;
            case R.id.id_tab_setting:
                selectTab(3);
                break;
        }
    }

    private void selectTab(int i) {
        //根据点击的Tab设置对应的ImageButton为绿色
        switch (i) {
            case 0:
                mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);
                break;
            case 1:
                mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);
                break;
            case 2:
                mImgAddress.setImageResource(R.mipmap.tab_address_pressed);
                break;
            case 3:
                mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);
                break;
        }
        //设置当前点击的Tab所对应的页面
        mViewPager.setCurrentItem(i);
    }

    //将四个ImageButton设置为灰色
    private void resetImgs() {
        mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);
        mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);
        mImgAddress.setImageResource(R.mipmap.tab_address_normal);
        mImgSetting.setImageResource(R.mipmap.tab_settings_normal);
    }
}

 

“微信”、“朋友”、“通讯录”、“设置”所对应的Fragment

WeixinFragment.java

public class WeixinFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

 

FrdFragment.java

public class FrdFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab2, container, false);
        return view;
    }
}

AddressFragment.java

public class AddressFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab3, container, false);
        return view;
    }
}

SettingFragment.java

public class SettingFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab4, container, false);
        return view;
    }
}

顶部布局文件

top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:background="@android:drawable/title_bar"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="45dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

四个Tab对应页面的布局文件

tab1.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

tab2.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

tab3.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

tab4.xml

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

底部布局文件

bottom.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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通讯录"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="设置"/>
    </LinearLayout>

</LinearLayout>

主布局文件

<?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">
    <include layout="@layout/top"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

完整源码 :点击下载

使用 ViewPager + Fragment 的方式综合了使用ViewPager和使用Fragment的优势,即:既能使用Fragment管理Tab对应页面的布局及业务逻辑的实现,使得Activity与Tab对应的页面分离,又能使用ViewPager实现左右滑动切换页面的效果。这种方式需要为ViewPager设置FragmentPagerAdapter适配器,关于适配器的知识可参考我之前写的一篇文章:Android必学之数据适配器BaseAdapter

 

作者:caobotao

出处: http://www.cnblogs.com/caobotao/p/5103673.html

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

2016-10-10 16:04:13 lcg910978041 阅读数 3328

Android六大界面布局方式:

声明Android程序布局有两种方式:

1) 使用XML文件描述界面布局;

2) 在Java代码中通过调用方法进行控制。

我们既可以使用任何一种声明界面布局的方式,也可以同时使用两种方式。

使用XML文件声明有以下3个特点:

  • 1) 将程序的表现层和控制层分离;
  • 2) 在后期修改用户界面时,无须更改程序的源程序;
  • 3) 可通过WYSIWYG可视化工具直接看到所设计的用户界面,有利于加快界面设计的过程。

建议尽量采用XML文件声明界面元素布局。在程序运行时动态添加界面布局会大大降低应用响应速度,但依然可以在必要时动态改变屏幕内容。

六大界面布局方式包括: 线性布局(LinearLayout)、框架布局(FrameLayout)、表格布局(TableLayout)、相对布局(RelativeLayout)、绝对布局(AbsoluteLayout)和网格布局(GridLayout) 。

1. LinearLayout线性布局

LinearLayout容器中的组件一个挨一个排列,通过控制android:orientation属性,可控制各组件是横向排列还是纵向排列。

LinearLayout的常用XML属性及相关方法

XML属性 相关方法 说明
android:gravity setGravity(int) 设置布局管理器内组件的对齐方式
android:orientation setOrientation(int) 设置布局管理器内组件的排列方式,可以设置为horizontal、vertical两个值之一

其中,gravity属性支持top, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal。也可以同时指定多种对齐方式的组合。

LinearLayout子元素支持的常用XML属性及方法

XML属性 说明
android:layout_gravity 指定该子元素在LinearLayout中的对齐方式
android:layout_weight 指定子元素在LinearLayout中所占的权重

2. TableLayout表格布局

TableLayout继承自Linearout,本质上仍然是线性布局管理器。表格布局采用行、列的形式来管理UI组件,并不需要明确地声明包含多少行、多少列,而是通过添加TableRow、其他组件来控制表格的行数和列数。

每向TableLayout中添加一个TableRow就代表一行;

每向TableRow中添加一个一个子组件就表示一列;

如果直接向TableLayout添加组件,那么该组件将直接占用一行;

在表格布局中,可以为单元格设置如下三种行为方式:

  • Shrinkable:该列的所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度;
  • Strentchable:该列所有单元格的宽度可以被拉伸,以保证组件能完全填满表格空余空间;
  • Collapsed:如果该列被设置为Collapsed,那么该列的所有单元格会被隐藏;

TableLayout的常用XML属性及方法

XML属性 相关方法 说明
android:collapseColumns setColumns(int, boolean) 设置需要被隐藏的列的序号,多个序号间用逗号分隔
android:shrinkColumns setShrinkAllColumns(boolean) 设置需要被收缩的列的序号
android:stretchColumns setStretchAllColumns(boolean) 设置允许被拉伸的列的序号

3. FrameLayout帧布局

FrameLayout直接继承自ViewGroup组件。帧布局为每个加入其中的组件创建一个空白的区域(称为一帧),每个子组件占据一帧,这些帧会根据gravity属性执行自动对齐。

FrameLayout的常用XM了属性及方法

XML属性 相关方法 说明
android:foreground setForeground(Drawable) 设置该帧布局容器的前景图像
android:foregroundGravity setForeGroundGraity(int) 定义绘制前景图像的gravity属性

4. RelativeLayout相对布局

RelativeLayout的XML属性及相关方法说明

XML属性 相关方法 说明
android:gravity setGravity(int)  
android:ignoreGravity setIgnoreGravity(int) 设置哪个组件不受gravity属性的影响

为了控制该布局容器的各子组件的布局分布,RelativeLayout提供了一个内部类:RelativeLayout.LayoutParams。

RelativeLayout.LayoutParams里只能设为boolean的XML属性

XML属性 说明
android:layout_centerHorizontal 设置该子组件是否位于布局容器的水平居中
android:layout_centerVertical  
android:layout_centerParent  
android:layout_alignParentBottom  
android:layout_alignParentLeft  
android:layout_alignParentRight  
android:layout_alignParentTop

RelativeLayout.LayoutParams里属性值为其他UI组件ID的XML属性

XML属性 说明
android:layout_toRightOf 控制该子组件位于给出ID组件的右侧
android:layout_toLeftOf  
android:layout_above  
android:layout_below  
android:layout_alignTop  
android:layout_alignBottom  
android:layout_alignRight  
android:layout_alignLeft

5. Android 4.0新增的网格布局GridLayout

GridLayout是Android4.0增加的网格布局控件,与之前的TableLayout有些相似,它把整个容器划分为rows × columns个网格,每个网格可以放置一个组件。性能及功能都要比tablelayout好,比如GridLayout布局中的单元格可以跨越多行,而tablelayout则不行,此外,其渲染速度也比tablelayout要快。

GridLayout提供了setRowCount(int)和setColumnCount(int)方法来控制该网格的行和列的数量。

GridLayout常用的XML属性和方法说明

XML属性 相关方法 说明
android:alignmentMode setAlignmentMode(int) 设置该布局管理器采用的对齐模式
android:columnCount setColumnCount(int) 设置该网格的列数量
android:columnOrderPreserved setColumnOrderPreserved(boolean) 设置该网格容器是否保留序列号
android:roeCount setRowCount(int) 设置该网格的行数量
android:rowOrderPreserved setRowOrderPreserved(boolean) 设置该网格容器是否保留行序号
android:useDefaultMargins setUseDefaultMargins(boolean) 设置该布局管理器是否使用默认的页边距

为了控制GridLayout布局容器中各子组件的布局分布,GridLayout提供了一个内部类:GridLayout.LayoutParams,来控制Gridlayout布局容器中子组件的布局分布。

GridLayout.LayoutParams常用的XML属性和方法说明

XML属性 说明
android:layout_column 设置该组件在GridLayout的第几列
android:layout_columnSpan 设置该子组件在GridLayout横向上跨几列
android:layout_gravity 设置该子组件采用何种方式占据该网格的空间
android:layout_row 设置该子组件在GridLayout的第几行
android:layout_rowSpan 设置该子组件在GridLayout纵向上跨几行

5. AbsoluteLayout绝对布局

即Android不提供任何布局控制,而是由开发人员自己通过X坐标、Y坐标来控制组件的位置。每个组件都可指定如下两个XML属性:

  • layour_x;
  • layout_y;

绝对布局已经过时,不应使用或少使用。

界面布局类型的选择和性能优化

首先得明确,界面布局类型的嵌套越多越深越复杂,会使布局实例化变慢,使Activity的展开时间延长。建议尽量减少布局嵌套,尽量减少创建View对象的数量。

1 . 减少布局层次,可考虑用RelativeLayout来代替LinearLayout。通过Relative的相对其他元素的位置来布局,可减少块状嵌套;

2 . 另一种减少布局层次的技巧是使用 <merge /> 标签来合并布局;

3 . 重用布局。Android支持在XML中使用 <include /> 标签, <include /> 通过指定android:layout属性来指定要包含的另一个XML布局。

如:

<code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; border: 0px; display: block; overflow-y: auto;"><span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">include</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:id</span>=<span class="value" style="color: rgb(221, 17, 68);">"@+id/id1"</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:layout</span>=<span class="value" style="color: rgb(221, 17, 68);">"@layout/mylayout"</span>></span>
<span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">include</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:id</span>=<span class="value" style="color: rgb(221, 17, 68);">"@+id/id2"</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:layout</span>=<span class="value" style="color: rgb(221, 17, 68);">"@layout/mylayout"</span>></span>
<span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">include</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:id</span>=<span class="value" style="color: rgb(221, 17, 68);">"@+id/id3"</span> <span class="attribute" style="color: rgb(0, 128, 128);">android:layout</span>=<span class="value" style="color: rgb(221, 17, 68);">"@layout/mylayout"</span>></span></code>
2016-06-05 19:56:18 Gnd15732625435 阅读数 3191

前言


    Android从1.0发展到现在的Android6.0已经有将近8年时间了,在这个过程中,它增加得不止是版本上的数字,其UI的颜值也是在逐年上升的,越来越好看了。在Android应用中,UI(User Interface)是非常重要的,它是人与手机之间数据传递、交互信息的重要媒介和对话接口,是Android系统的重要组成部分。苹果公司的iPhone之所以被人们喜欢,除了其强大的功能外,最重要的就是其完美的界面设计。在Android系统中,同样可以开发出绚丽多彩的UI界面。在Android系统中,决定界面是否美观的因素有很多,比如说:布局、内容元素样式,颜色搭配等等。也就是说界面布局是UI设计的一部分。




界面布局分类


    良好的布局对UI设计至关重要,就好像,一个女人,只要五官端正,那么稍微化点妆就美的不得了了呀,是吧。这界面布局就是UI的五官。不过,它的种类不是五个,是六个,也算是图个吉利(●'◡'●)。分别是:相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局。




相对布局


    相对布局,英文名RelativeLayout,在Eclipse中开发Android程序时,默认采用的就是相对布局。相对,相对,肯定是有参照物的,这个参照物有两个,大家应该能猜到,就是容器和控件。所以它有两种形式,一种是相对于容器而言的,一种是相对于控件而言的。


 


线性布局


    线性布局,英文名LinearLayout,是Android中较为常用的布局方式,它使用<LinearLayout>标签。主要有两种形式,一种是水平线性布局,一种是垂直线性布局。




表格布局


    表格布局,英文名TableLayout,顾名思义,表格布局就是让控件以表格的形式来排列,只要将控件放在单元格中,控件就可以整齐的排列。就像Android手机里面的程序首页一样,你看图片都是大小一样,整齐的排列在表格中的。




帧布局


    帧布局,英文名FrameLayout,是Android布局中最简单的一种。帧布局为每一个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧)。采用帧布局方式设计界面时,只能在屏幕上显示一个控件,如果添加多个控件,这些控件会按照顺序在屏幕上重叠显示,如下图,将背景设置成不同颜色以方便区分,大小依次减小以便不完全覆盖。




网格布局


    网格布局,英文名GridLayout,Android4.0新增的布局,它实现了控件的交错显示,能够避免因布局嵌套对设备性能的影响,更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元,并指定控件的显示区域和控件在该区域的显示方式。网格布局中的控件可以很整齐的排列,并且可以控制每个控件所占的行数和列数。




绝对布局


    绝对布局,英文名AbsoluteLayout,绝对布局需要通过制定x,y坐标来控制每一个控件的位置,放入该布局的控件需要通过android:layout_x、android:layout_y两个属性指定其准确的坐标值,并显示在屏幕上。需要注意的是,理论上绝对布局可以完成任何布局设计,但是实际的工程应用中不提倡使用这种布局。因为使用这种布局不但需要精确的计算每个组件的大小,而且当应用程序运行在不同屏幕的手机上产生的效果也不相同,因此,一般不推荐使用绝对布局。




QQ登录界面例子


    为了更好的理解布局,我做了一个QQ登录的界面加入说明,其中包含相对布局和线性布局。


QQ登录界面代码


<pre name="code" class="html"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#E6E6E6"
    android:orientation="vertical"
    tools:context=".MainActivity" >    //整个大框架是一个相对布局,里面包含着线性布局
	
    <ImageView 
        android:id="@+id/iv_head"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:src="@drawable/dddss"/>
        
    <LinearLayout                       //包含在相对布局里面的线性布局
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_head"
        android:layout_margin="10dp"                   
        android:background="#87CEEB"
        android:orientation="vertical">
        
        <RelativeLayout                  //包含在线性布局里面的相对布局
            android:id="@+id/rl_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp">
            
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="账号"/>
            
            <EditText
                android:id="@+id/et_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/tv_name"
                android:hint="请输入账号"      //hint属性,后面的文字用于提示输入框要输入的信息
                android:background="@null"/>   
                            
         </RelativeLayout> 
         
        <View 
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="#E6E6E6"/>
        
        <RelativeLayout
            android:id="@+id/rl_userpsw"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp">
            
            <TextView 
                android:id="@+id/tv_psw"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="密码"/>
            
            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/tv_psw"
                android:inputType="textPassword"
                android:hint="请输入密码"
                android:background="@null"/>
         
        </RelativeLayout>
        
     </LinearLayout>
     
    <Button 
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/layout"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:background="#3C8DC4"
        android:text="登录"
        android:textColor="#ffffff" />     
       
</RelativeLayout>



QQ登录界面效果图:


     


总结


    上文中的效果图是Android手机模拟器,就是代码打包成.apk文件并安装到手机上的效果。好的布局带来好的效果,在实际的开发中,需要综合考虑,比如说不同手机的屏幕大小,像素不同,如果用绝对布局显式的效果就不一样,这是不太好的。以上所述,如有错误,敬请指正。微笑