复杂背景图,如何布局

原创 2018年04月16日 11:50:54

复杂背景图,如何布局

        在项目经常会遇到,产品经理给定了一张背景图片,需要在背景图指定的位置放入适合的控件,进行展示。今天说下如何使用ConstraintLayout实现布局,ConstraintLayout的基础大家自己搜索下。下面我们先展示一张图片。


        给定了这样的一幅图片,你会如何进行布局呢?下面我们开始布局吧。

        从图片上我们可以看出,整个图片可以分6部分,那么每部分的大小如何确定呢?我们可以用ps软件或者其它绘图工具,确认每部分的高度,所有部分的高度加起来就是整张图片的高度了。在ConstraintLayout中constraintVertical_weight属性实现了和LinearLayout中设置layout_weight相同的效果(占比权重)。通过constraintVertical_weight,我们实现了将整个布局分隔从6部分。以下是具体的分隔布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivityBackground"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="MissingConstraints">

    <LinearLayout
        android:id="@+id/ll3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll2"
        app:layout_constraintVertical_weight="740">
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llback"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/beehive"
        android:orientation="horizontal"></LinearLayout>

    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="436"></LinearLayout>

    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll1"
        app:layout_constraintVertical_weight="140">

    </LinearLayout>


    <LinearLayout
        android:id="@+id/ll4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll3"
        app:layout_constraintVertical_weight="180">
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll4"
        app:layout_constraintVertical_weight="424">
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

        在布局中,我们把第三部分放置在最前面,因为第三部的部分需要背景图片遮挡住部分,所以需要放置在背景图之前进行布局。整个布局框架基本完成了。以下是最终的布局。图片之类的需要大家自己脑补了

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivityBackground"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="MissingConstraints">

    <LinearLayout
        android:id="@+id/ll3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll2"
        app:layout_constraintVertical_weight="740">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="154">
        </LinearLayout>

        <!--adnroid 4.4 RecyclerView need fix size if item size lager. otherwise,it's will culculate the size with all data!-->
        <com.zzy.jackpot.jackpotRecyclerView
            android:id="@+id/recyler1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></com.zzy.jackpot.jackpotRecyclerView>

        <com.zzy.jackpot.jackpotRecyclerView
            android:id="@+id/recyler2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"></com.zzy.jackpot.jackpotRecyclerView>

        <com.zzy.jackpot.jackpotRecyclerView
            android:id="@+id/recyler3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></com.zzy.jackpot.jackpotRecyclerView>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="160"></LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/llback"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/beehive"
        android:orientation="horizontal"></LinearLayout>

    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="436"></LinearLayout>

    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll1"
        app:layout_constraintVertical_weight="140">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="154"></LinearLayout>


        <com.sunfusheng.marqueeview.MarqueeView
            android:id="@+id/tvScroll"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="772"
            app:mvAnimDuration="2000"
            app:mvDirection="bottom_to_top"
            app:mvInterval="5000"
            app:mvSingleLine="false"
            app:mvGravity="center"
            app:mvTextColor="@color/black"
            app:mvTextSize="16dp" />


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="154"></LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/ll4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@id/ll5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll3"
        app:layout_constraintVertical_weight="180">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="381"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="384"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="You have"
                android:textColor="@color/white"
                android:textSize="16dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tvSpinNum"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:textSize="20dp"
                android:text="100 Spins"
                android:textColor="@color/white"
                android:textStyle="bold" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="381"></LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll4"
        app:layout_constraintVertical_weight="424">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="180"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/btnPlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@mipmap/buttom_play" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_weight="152"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/btnPrizes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="28dp"
                android:src="@mipmap/buttom_prizes" />


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"></LinearLayout>

            <ImageView
                android:id="@+id/btnGetSpin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="28dp"
                android:src="@mipmap/buttom_get_spin" />

        </LinearLayout>


    </LinearLayout>


</android.support.constraint.ConstraintLayout>


Android UI性能优化实战 解决布局复杂导致的程序奔溃

转载请标明出处:  http://blog.csdn.net/lmj623565791/article/details/45556391;  本文出自:【张鸿洋的博客】 1、概述 ...
  • u011240877
  • u011240877
  • 2015-06-22 22:29:34
  • 1828

Android复杂界面布局解决方案

前言    最近接近年关,公司项目没什么事情做。闲暇之余的时间笼统的做了一个app的框架(虽然我不知道这样算不算是框架)。      我们知道,很多App的界面是非常复杂的,如果按照常规的方法去写l...
  • jixiongxu
  • jixiongxu
  • 2018-01-12 20:38:56
  • 454

Android:复杂滚动布局的一种适配思路

【转载请注明出处】 笔者:DrkCore 博客:http://blog.csdn.net/drkcore/article/details/51120570 App 的首页向来是个寸土寸金的...
  • DrkCore
  • DrkCore
  • 2016-04-11 12:06:12
  • 4212

学习RecyclerView优雅实现复杂列表布局

这次学习的内容是使用RecyclerView来实现一些较为复杂的布局,比如一个item: 最左边是一个imageview,中间部分为textView,textView下面又是一个textView,最...
  • qq_31568297
  • qq_31568297
  • 2016-12-05 19:10:03
  • 1987

FLEX 4常用设置背景图片的方法

encoding="utf-8"?>                  xmlns:s="library://ns.adobe.com/flex/spark"                 xml...
  • u011405221
  • u011405221
  • 2015-07-03 14:45:47
  • 1163

Android_ListView 用多样式item实现复杂布局显示

类似上面两张的布局,可以一个一个添加至布局,也可以分别使用ListView,也可以用同一个ListView,用多个item填充。即将所有的item分类,分成几种item。重点是写ListView的适配...
  • iliupp
  • iliupp
  • 2016-06-15 09:55:11
  • 921

一步步教你实现完整的复杂列表布局

一步步教你实现完整的复杂列表布局本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布引子:我们在工作中遇到最多的视图场景恐怕就是各种样式的列表了,这也是由手机屏幕有限的尺寸决定的,随着需...
  • guanyingcao
  • guanyingcao
  • 2017-07-15 15:45:57
  • 1835

CSS应用:复杂背景图案

通过线性渐变和通过径向渐变可以容易的构造出条纹背景(如果你还对线性渐变和径向渐变不了解,请参考我前面的文章线性渐变和径向渐变,你也可以在遇到困难的时候再去查阅),但他们能做的事情远不止于此,使用他们能...
  • liuy_98_1001
  • liuy_98_1001
  • 2016-05-23 11:55:36
  • 1645

一个复杂页面该如何布局设计

很多产品的信息量很大,又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息,会让界面越来越凌乱。我们可以这样做:把需要展示的信息都列出来 先不考虑信息之间的关系和顺序,大致列出即可。...
  • lucky_girl11
  • lucky_girl11
  • 2017-04-22 16:41:44
  • 474

不一样的RecyclerView优雅实现复杂列表布局(一)

前言在多彩布局不断呈现的今天,多布局混合排布成为一个时尚,今天就结合Holder实现RecyclerView复杂列表布局。 效果图如下(三种布局): 1.首先在我们主布局中加入我们的Recycle...
  • huang3513
  • huang3513
  • 2017-03-14 16:09:40
  • 2081
收藏助手
不良信息举报
您举报文章:复杂背景图,如何布局
举报原因:
原因补充:

(最多只允许输入30个字)