优惠券View(可展开的view)

没展开前的图片:
这里写图片描述
展开后的图片:
这里写图片描述
布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/box_coupon_bottom"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="10dip"
    android:layout_marginRight="10dip"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/orange_light">

        <TextView
            android:id="@+id/txt_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="10dp"
            android:text="250"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/box_coupon_infos_sp"
        android:layout_width="match_parent"
        android:layout_height="0dip">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="300dip"
            android:layout_gravity="bottom">

            <TextView
                android:id="@+id/box_coupon_infos"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:lineSpacingExtra="2sp"
                android:minLines="3"
                android:padding="10dip"
                android:text=""
                android:textColor="@color/gray8"
                android:textSize="13sp" />

        </FrameLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="10dip"
            android:background="@drawable/shd_bottom" />

    </FrameLayout>

    <TextView
        android:id="@+id/bt_open_infos"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="6dip"
        android:text="适用范围"
        android:textColor="@color/gray8"
        android:textSize="13sp" />
</LinearLayout>

代码:

public class CouponView extends FrameLayout implements View.OnClickListener, ValueAnimator.AnimatorUpdateListener {
    TextView boxCouponInfos;
    View btOpenInfos;
    View boxCouponInfosSp;
    private boolean isOpen = false;
    private int ghhh = 0;
    private int position;
    private TextView tvNum;

    public CouponView(Context context) {
        this(context, null);
    }

    public CouponView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        LayoutInflater.from(getContext()).inflate(R.layout.view_coupon, this, true);
        boxCouponInfos = (TextView) findViewById(R.id.box_coupon_infos);
        btOpenInfos = findViewById(R.id.bt_open_infos);
        boxCouponInfosSp = findViewById(R.id.box_coupon_infos_sp);
        tvNum = (TextView) findViewById(R.id.txt_num);
        btOpenInfos.setOnClickListener(this);
    }

    public void setData(int position,String num){
        this.position = position;
        tvNum.setText(num);
    }

    @Override
    public void onClick(View v) {
        if (isOpen) {//关闭
            isOpen = false;
            com.nineoldandroids.animation.ValueAnimator valueAnimator = com.nineoldandroids.animation.ValueAnimator.ofInt(boxCouponInfosSp.getMeasuredHeight(), 0);
            valueAnimator.setInterpolator(new DecelerateInterpolator());
            valueAnimator.addUpdateListener(CouponView.this);
            valueAnimator.setDuration(200);
            valueAnimator.start();
        } else {//打开
            isOpen = true;
            ghhh = boxCouponInfos.getMeasuredHeight();
            com.nineoldandroids.animation.ValueAnimator valueAnimator = com.nineoldandroids.animation.ValueAnimator.ofInt(boxCouponInfosSp.getMeasuredHeight(), ghhh);
            valueAnimator.setInterpolator(new DecelerateInterpolator());
            valueAnimator.addUpdateListener(CouponView.this);
            valueAnimator.setDuration(200);
            valueAnimator.start();
            NotifyManager.notifyUpdateToUI(Test14Activity.class, position);
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        int ii = (int) animation.getAnimatedValue();
        ViewGroup.LayoutParams layoutParams = boxCouponInfosSp.getLayoutParams();
        layoutParams.height = ii;
        boxCouponInfosSp.setLayoutParams(layoutParams);
    }
}

Activity:

public class Test14Activity extends Activity implements StandardAdapter.OnCreateViewListener, NotifyManager.OnUpdateListener {
    private ListView lv;
    private StandardAdapter adapter;
    private List<String> data;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test14);
        lv = (ListView) findViewById(R.id.lv);
        data = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            data.add("500");
        }
        adapter = new StandardAdapter();
        adapter.setOnCreateViewListener(this);
        adapter.setData(data);
        lv.setAdapter(adapter);
        NotifyManager.addUpdateListener(Test14Activity.class, this);
    }

    @Override
    public View CreateView(int position, View convertView, ViewGroup parent, List<?> mList) {
        if (convertView == null) {
            convertView = new CouponView(this);
        }
        ((CouponView) convertView).setData(position, (String) adapter.getItem(position));
        return convertView;
    }

    @Override
    public void onUpdataed(Object t) {
        final int position = (int) t;
        lv.postDelayed(new Runnable() {
            @Override
            public void run() {
                lv.smoothScrollToPosition(position);
            }
        }, 500);
    }

    @Override
    protected void onDestroy() {
        NotifyManager.removeUpdateListener(this);
        super.onDestroy();
    }
}

其中的NotifyManager参考上篇文章全局更新

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用uni-collapse组件实现仿美团小程序优惠券展开收起效果的demo示例: ```html <template> <view class="coupon"> <view class="coupon-header"> <text class="title">优惠券</text> <text class="sub-title">{{couponList.length}}张</text> </view> <view class="coupon-list"> <uni-collapse :accordion="false"> <uni-collapse-item :title="item.title" :key="index" v-for="(item, index) in couponList"> <view class="coupon-item" slot="content"> <view class="coupon-item-left"> <view class="coupon-item-money"> <text class="money-symbol">¥</text> <text class="money-value">{{item.money}}</text> </view> <view class="coupon-item-desc">{{item.desc}}</view> </view> <view class="coupon-item-right"> <view class="coupon-item-time">{{item.time}}</view> <view class="coupon-item-status">{{item.status}}</view> </view> </view> </uni-collapse-item> </uni-collapse> </view> </view> </template> <script> export default { data() { return { couponList: [ { title: '满100减50', money: 50, desc: '全场通用', time: '2021-12-31 23:59:59', status: '未使用' }, { title: '满50减10', money: 10, desc: '仅限酒水类商品', time: '2022-12-31 23:59:59', status: '已使用' }, { title: '满200减50', money: 50, desc: '仅限美食类商品', time: '2022-12-31 23:59:59', status: '未使用' } ] } } } </script> <style> .coupon { padding: 20upx; } .coupon-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20upx; } .coupon-header .title { font-size: 36rpx; font-weight: bold; } .coupon-header .sub-title { font-size: 28rpx; color: #999; } .coupon-list { background-color: #f5f5f5; border-radius: 20upx; overflow: hidden; } .coupon-item { display: flex; align-items: center; justify-content: space-between; height: 120upx; padding: 20upx; background-color: #fff; } .coupon-item-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .coupon-item-money { display: flex; align-items: center; } .coupon-item-money .money-symbol { font-size: 28rpx; color: #ff4545; } .coupon-item-money .money-value { font-size: 36rpx; font-weight: bold; color: #ff4545; } .coupon-item-desc { font-size: 28rpx; color: #999; } .coupon-item-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .coupon-item-time { font-size: 28rpx; color: #999; } .coupon-item-status { font-size: 28rpx; color: #ff4545; } </style> ``` 在这个示例中,我们使用了uni-collapse和uni-collapse-item组件来实现优惠券展开收起效果。在coupon-list中使用了uni-collapse组件,并将accordion属性设置为false,这样就可以展开多个优惠券了。在uni-collapse-item中,将title属性设置为优惠券的标题,将key属性设置为索引值,然后在slot="content"中放置具体的优惠券内容。在优惠券内容中,使用了flex布局和一些样式来实现美团小程序优惠券的展示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值