Android仿淘宝加入购物车布局效果

本文介绍如何在Android应用中创建并定制PopupWindow的样式,包括设置其高度、透明度及内部元素布局等细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现效果:
这里写图片描述
思路:点击购物车弹出一个PopupWindow,主要弄清楚的是PopupWindow的高度以及透明度,图片的位置,图片下层布局的高度(它的高度比popup的低一些)。PopupWindow的透明度要和Activity弹出弹出框的透明度一样,具体可以参考透明度换算

PopupWindow的xml代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_popupShopCart"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >

        <RelativeLayout
            android:id="@+id/rlBottom_popShopCart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/mainBlue_color">

            <TextView
                android:id="@+id/tvReal_popShopCart"
                style="@style/RealPriceStyle"
                android:layout_marginTop="@dimen/twentyFive_dp"
                android:text="¥78" />

            <TextView
                android:id="@+id/tvStock_popShopCart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tvReal_popShopCart"
                android:layout_marginTop="@dimen/ten_dp"
                android:text="库存88件"
                android:textColor="@color/muchDeep_color"
                android:textSize="@dimen/fourteen_size" />

            <TextView
                android:id="@+id/tvChooseText_popShopCart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tvStock_popShopCart"
                android:layout_marginTop="@dimen/ten_dp"
                android:text="请选择  尺码  颜色"
                android:textColor="@color/muchDeep_color"
                android:textSize="@dimen/fourteen_size" />


        </RelativeLayout>

        <FrameLayout
            android:id="@+id/flShow_popShopCart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/join_img_shape">

            <ImageView
                android:id="@+id/ivShow_popShopCart"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@mipmap/ic_launcher_round"
                android:scaleType="fitXY" />

        </FrameLayout>
</RelativeLayout>

Activity代码

public class MapShopDetailActivity extends BaseActivity {

    private TextView tvJoinShopCart;
    private PopupWindow popupWindow = null;

    private RelativeLayout mRlBottom, mRlPop;
    private FrameLayout mFlShow;
    private TextView mTvReal, mTvStock, mTvChoose;

    private RelativeLayout.LayoutParams mFlParams, mRlBottomParams, mRlMainParams;
    private RelativeLayout.LayoutParams mTvRealParams, mTvStockParams, mTvChooseParams ;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map_shop_detail);
    }

    @Override
    protected void initView() {
        tvJoinShopCart = (TextView) findViewById(R.id.tvJoinShopCart_shopDetail);
        tvJoinShopCart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showPop();
            }
        });
    }

    private void showPop() {
        View contentView = LayoutInflater.from(this).inflate(R.layout.popup_join_shopcart, null);

        setPopParams(contentView);

        if (popupWindow == null) {
            popupWindow = new PopupWindow(contentView, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT, true);
        }

        popupWindow.setTouchable(true);
        popupWindow.setFocusable(true); //设置点击menu以外其他地方以及返回键退出
        popupWindow.setOutsideTouchable(true);   //设置触摸外面时消失
        popupWindow.showAtLocation(findViewById(R.id.ll_shopDetail), Gravity.BOTTOM, 0, 0);

//设置Activity透明度为0.6
        WindowManager.LayoutParams params = this.getWindow().getAttributes();
        params.alpha = 0.6f;
        this.getWindow().setAttributes(params);

        mRlPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
//                popupWindow.dismiss();
            }
        });

        mFlShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MapShopDetailActivity.this, "hahahahhahhah", Toast.LENGTH_SHORT).show();

            }
        });

// PopupWindow消失时将Activity透明度设置为1f
        popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                popupWindow.dismiss();
                popupWindow = null;
                WindowManager.LayoutParams params = MapShopDetailActivity.this.getWindow().getAttributes();
                params.alpha = 1f;
                MapShopDetailActivity.this.getWindow().setAttributes(params);
            }
        });
    }

//设置PopupWindow的控件位置
    private void setPopParams(View contentView) {
        mRlPop = (RelativeLayout) contentView.findViewById(R.id.rl_popupShopCart);
        //图片的FrameLayout
        mFlShow = (FrameLayout) contentView.findViewById(R.id.flShow_popShopCart);
        //除图片之外的布局
        mRlBottom = (RelativeLayout) contentView.findViewById(R.id.rlBottom_popShopCart);
        //图片右边的文字
        mTvReal = (TextView) contentView.findViewById(R.id.tvReal_popShopCart);
        mTvStock = (TextView) contentView.findViewById(R.id.tvStock_popShopCart);
        mTvChoose = (TextView) contentView.findViewById(R.id.tvChooseText_popShopCart);
        //设置图片大小为屏幕宽度的1/4,距左边屏幕15像素,效果就是将图片固定在PopupWindow的左上方
        mFlParams = new RelativeLayout.LayoutParams(ScreenUtils.getScreenWidth(this) / 4, ScreenUtils.getScreenWidth(this) / 4);
        mFlParams.leftMargin = 15;
        //给PopupWindow设置高度,为屏幕高度的3/5+20
        mRlMainParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenHeight(this) / 5 * 3 + 20);
        //下部除图片之外的布局,高度比PopupWindow少40像素,实现图片位置效果
        mRlBottomParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenHeight(this) / 5 * 3 - 20);
        //设置它离顶部40像素,将整体布局下移
        mRlBottomParams.topMargin = 40;

        mFlShow.setLayoutParams(mFlParams);
        mRlBottom.setLayoutParams(mRlBottomParams);
        mRlPop.setLayoutParams(mRlMainParams);

        //Text的Params,主要是TextView要设置leftMargin为图片宽度+图片左移宽度+图片和文字的距离,我想要20像素,所以设置了ScreenUtils.getScreenWidth(this) / 4 + 30
        mTvRealParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mTvStockParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mTvChooseParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mTvRealParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
        mTvStockParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
        mTvChooseParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
        //设置相对布局
        mTvStockParams.addRule(RelativeLayout.BELOW,mTvReal.getId());
        mTvChooseParams.addRule(RelativeLayout.BELOW,mTvStock.getId());
        mTvReal.setLayoutParams(mTvRealParams);
        mTvChoose.setLayoutParams(mTvChooseParams);
        mTvStock.setLayoutParams(mTvStockParams);
    }
}

给自己:要有耐心。
出现问题:突然间图片上部分颜色和Activity的背景颜色不一样了。
解决:Popup的宽高在new PopupWindow时设置,将后来设置的LayoutParams注释掉
`
popupWindow = new PopupWindow(view, ScreenUtils.getScreenWidth(context),ScreenUtils.getScreenHeight(context)/5*3+20);
// mRlPop.setLayoutParams(mRlMainParams);

`

评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值