Android简单实现仿支付宝新年红包活动页面的动态布局效果

于 2016-02-27 22:26:31 发布
阅读量6k 收藏 4
点赞数
分类专栏： 技术 android开发 文章标签： android 支付宝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshizisezise/article/details/50757334
版权

转载请注明出处：http://blog.csdn.net/woshizisezise/article/details/50757334

大家好，隔了很长一段时间没有更新博客了，有几方面的原因，一是因为年底了在准备换工作的事情，二是因为年底了公司项目需要一个归档和总结的内容，所以做了一个月的开发共通组件的抽取成SDK的工作，内容都是一些平时比较常用的功能模块，比如像登录注册，第三方注册和分享，视频播放等代码，已经抽取成了单独的类库，工程关联就可以根据开发文档调用使用了，从一定的角度上来说为以后的项目节约了一定的时间和人力投入，如果大家有需要的话可以留言，后续会写一写这些模块的实现与使用，以及大家如果有哪些方面的问题或者功能无法实现的，可以在文章下方留言，大家一起探讨，有时间的话我会尽量给大家写一个Demo，共同进步嘛，虽然我比不上那些大牛，但是我相信自己坚持下去，一定是会有成为大牛的一天的，我们大家都是！

好了，废话不多说了，正式进入今天的主题，这件事发生在前不久，是我的一个朋友问我的一个问题，她（是个美女~）在开发中遇到了一个问题，就是类似支付宝的新年活动版块的效果，如下图所示：
这里写图片描述

她们也要做一个类似的活动广告效果，支付宝的界面肯定是新年过完后中间的“新春送福”模块就消失了，后面的模块动态的往前补齐，所以这个功能肯定是根据从服务器获取的某个字段来判断的，而不是写死的布局，要不然用户体验就特别差了，我暂时把这个字段设想为boolean值，true代表新年，显示“新春祝福”模块，false代表非新年时间段，显示日常模块，这样就能很灵活的控制界面展示效果了，刚开始她给我截图的时候我也犯难了，这可怎么做呢，她之前的工程结构是用的GridView，我想用GridView的话那怎么能插进去的，然后也百度找了找，没有找到相关的资源，后来干脆就自己写一个吧，想了好几种方法，都被自己给否定掉了，后来一想，嗯，只能根据boolean值来加载两套布局了，意思就是从上到下是一个LinearLayout，然后一排一排的addView(view)方式来做出这个效果了，嗯，想到了就开始做吧，代码陆续如下~~~

首先新建两套布局文件，分别命名为item_normal.xml和item_party.xml，代码很简单，示范用就写的是个意思咯

  • item_normal.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="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/image1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/image2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/image2"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/image3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/image3"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/image4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/image4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

</LinearLayout>
  • item_party.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="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/item_image1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/item_text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/item_image1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:text="债权转让"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="2" >

        <ImageView
            android:id="@+id/item_image2"
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:layout_centerHorizontal="true"
            android:scaleType="centerCrop"
            android:src="@drawable/icon1" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/item_image3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/item_text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/item_image3"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:text="债权转让"
            android:textColor="#000000"
            android:textSize="15sp" />
    </RelativeLayout>

</LinearLayout>

好了，布局文件写好了，下面主要就是控制逻辑部分了，本来图片和文字这两部分都应该是从服务器中获取用来填充，这个案例只是为了实现效果，所以文字部分我自己写了个list用来填充，图片部分用的都是统一的资源文件，到时候如果用的朋友可以自行修改资源即可，好了，废话不多说，看MainActivity中的代码。。。

package com.example.alipaydemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    private LinearLayout linearLayout;
    private List<String> textList = new ArrayList<String>();
    private static final String TAG = "MainActivity";
    private boolean isParty = true;// 用来标识是否是活动期，对应加载不同的布局
    private LayoutInflater inflater;
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        inflater = LayoutInflater.from(mContext);
        linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
        initDatas();
    }

    private void initDatas() {
        for (int i = 1; i < 13; i++) {
            textList.add("债权转让" + i);
        }

        int index = 0;// 用来记录截取的下标

        // 开始填充数据
        if (isParty) {
            // 说明是活动期，加载特殊xml文件
            View view = inflater.inflate(R.layout.item_party, null);
            ImageView image1 = (ImageView) view.findViewById(R.id.item_image1);
            ImageView image2 = (ImageView) view.findViewById(R.id.item_image2);
            ImageView image3 = (ImageView) view.findViewById(R.id.item_image3);
            TextView text1 = (TextView) view.findViewById(R.id.item_text1);
            TextView text3 = (TextView) view.findViewById(R.id.item_text3);
            List<String> subList = textList.subList(0, 2);

            text1.setText(subList.get(0));
            text3.setText(subList.get(1));

            index = 2;

            linearLayout.addView(view);
        }

        int lines = calLineNum();// 判断有几行
        for (int i = 0; i < (isParty ? lines - 1 : lines); i++) {// 0 1
            int total = 0;
            View view = inflater.inflate(R.layout.item_normal, null);
            ImageView image1 = (ImageView) view.findViewById(R.id.image1);
            ImageView image2 = (ImageView) view.findViewById(R.id.image2);
            ImageView image3 = (ImageView) view.findViewById(R.id.image3);
            ImageView image4 = (ImageView) view.findViewById(R.id.image4);
            TextView text1 = (TextView) view.findViewById(R.id.text1);
            TextView text2 = (TextView) view.findViewById(R.id.text2);
            TextView text3 = (TextView) view.findViewById(R.id.text3);
            TextView text4 = (TextView) view.findViewById(R.id.text4);
            List<String> subList = textList.subList(index, textList.size());
            Log.e(TAG, "subList size = : " + subList.size());
            if (subList.size() > 4) {
                List<String> subList2 = subList.subList(total, total + 4);
                image1.setImageResource(R.drawable.ic_launcher);
                image2.setImageResource(R.drawable.ic_launcher);
                image3.setImageResource(R.drawable.ic_launcher);
                image4.setImageResource(R.drawable.ic_launcher);
                text1.setText(subList2.get(0));
                text2.setText(subList2.get(1));
                text3.setText(subList2.get(2));
                text4.setText(subList2.get(3));
            } else if (subList.size() <= 4) {
                int count = subList.size();// 2
                int num = 0;
                if (num < count) {
                    image1.setImageResource(R.drawable.ic_launcher);
                    text1.setText(subList.get(0));
                    num++;
                }
                if (num < count) {
                    image2.setImageResource(R.drawable.ic_launcher);
                    text2.setText(subList.get(1));
                    num++;
                }
                if (num < count) {
                    image3.setImageResource(R.drawable.ic_launcher);
                    text3.setText(subList.get(2));
                    num++;
                }
                if (num < count) {
                    image4.setImageResource(R.drawable.ic_launcher);
                    text4.setText(subList.get(3));
                }
            }

            if (isParty) {
                index = 4 * (i + 1)+2;
            }else {
                index = 4 * (i + 1);
            }
            Log.e(TAG, "index is = " + index);

            linearLayout.addView(view);
        }

    }

    /**
     * 计算有几行
     * 
     * @return
     */
    public int calLineNum() {
        int num = -1;
        if (isParty) {
            num = textList.size() + 2;// 12
        } else {
            num = textList.size();//
        }
        int line = num / 4;// 3
        int yu = num % 4;// 0

        if (yu > 0 && yu < 4) {
            line = line + 1;
        }
        Log.e(TAG, "line is :" + line);
        return line;
    }
}

怎么样，代码是不是很简单，主要的思想就两步，第一就是根据boolean值来判断填充的所使用的布局文件，第二就是通过计算来填充数据，分别对应下面两个方法：

// 开始填充数据
        if (isParty) {
            // 说明是活动期，加载特殊xml文件
            View view = inflater.inflate(R.layout.item_party, null);
            ImageView image1 = (ImageView) view.findViewById(R.id.item_image1);
            ImageView image2 = (ImageView) view.findViewById(R.id.item_image2);
            ImageView image3 = (ImageView) view.findViewById(R.id.item_image3);
            TextView text1 = (TextView) view.findViewById(R.id.item_text1);
            TextView text3 = (TextView) view.findViewById(R.id.item_text3);
            List<String> subList = textList.subList(0, 2);

            text1.setText(subList.get(0));
            text3.setText(subList.get(1));

            index = 2;

            linearLayout.addView(view);
        }
    /**
     * 计算有几行
     * 
     * @return
     */
    public int calLineNum() {
        int num = -1;
        if (isParty) {
            num = textList.size() + 2;//
        } else {
            num = textList.size();//
        }
        int line = num / 4;//
        int yu = num % 4;//

        if (yu > 0 && yu < 4) {
            line = line + 1;
        }
        Log.e(TAG, "line is :" + line);
        return line;
    }

通过一个boolean值isParty来控制布局，下面来看看最终的效果，当isParty==true时：
这里写图片描述

当isParty==false时：
这里写图片描述

这里是有一个小问题的，或者称不上问题的问题，因为这里考虑的是如果要出现这个活动也，所以其他模块的数量不会少于2个，所以我这里并未做2以内的角标越界处理，需要考虑的朋友可以自行处理一下，好了，到这里整个功能就做完了，这里广告的位置并不限制于第一行，也可以是第二行第三行，你想在哪儿就可以在哪儿，只要修改一下判断位置的算法即可，所以我觉得还是比较灵活的，代码也比较简单，如果大家有更好的方法，欢迎在下方参与讨论，也让我有所提高，谢谢！

你的支持就是我的动力，欢迎大家热烈交流~欢迎大家订阅公众号，我会不定期更新资源，供大家一起学习。
这里写图片描述

胖子爱你520
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖子爱你520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值