【Android】Jetpack全组件实战开发短视频应用App(九)

前言

项目地址
我们上一篇主要是写了下首页Item布局,还差中间的图片和视频,我们这一篇补上

图片

图片类型有两种,一种是图片的宽比图片的高大,这个时候我们就需要吧图片宽度占整个屏幕,高度自适应

第二种就是图片的高比图片的宽大,这个时候我们在显示图片的时候就要左侧有个编剧,宽高自适应

    private void setSize(int width, int height, int marginLeft, int maxWidth, int maxHeight) {
        int finalWidth, finalHeight;
        if (width > height) {
            finalWidth = maxWidth;
            finalHeight = (int) (height / (width * 1.0f / finalWidth));
        } else {
            finalHeight = maxHeight;
            finalWidth = (int) (width / (height * 1.0f / finalHeight));
        }

        ViewGroup.LayoutParams params = getLayoutParams();
        params.width = finalWidth;
        params.height = finalHeight;
        if (params instanceof FrameLayout.LayoutParams) {
            ((FrameLayout.LayoutParams) params).leftMargin = height > width ? PixUtils.dp2px(marginLeft) : 0;
        } else if (params instanceof LinearLayout.LayoutParams) {
            ((LinearLayout.LayoutParams) params).leftMargin = height > width ? PixUtils.dp2px(marginLeft) : 0;
        }
        setLayoutParams(params);
    }

自定义的ImageView中,主要就是那段代码计算显示

视频

视频显示也分两种:宽度>高度 ;宽度<高度,整体的计算和图片差不对,我们就先以第一种为例,我们看下都显示那些东西

我们看,有个缩略图,中间有个开始暂停按钮,下面有个进度条,如果是宽度<高度的话,我们还给它加上给高斯模糊背景,我们先把这个布局写完

<?xml version="1.0" encoding="utf-8"?>
<merge 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:orientation="vertical">

    <com.hfs.libcommon.view.PPImageView
        android:id="@+id/blur_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="blur_image"
        tools:background="@color/color_theme_10"/>


    <!--    真正能够播放展示视频画面的view  会动态的添加到这里-->


    <com.hfs.libcommon.view.PPImageView
        android:id="@+id/cover"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="cover"/>


    <ImageView
        android:id="@+id/play_btn"
        android:layout_width="@dimen/dp_40"
        android:layout_height="@dimen/dp_40"
        android:layout_gravity="center"
        android:src="@drawable/icon_video_play"
        android:transitionName="play_btn"/>


    <!--    视频播放时的底部进度条-->

    <ProgressBar
        android:id="@+id/buffer_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:indeterminate="true"
        android:indeterminateTint="@color/color_theme"
        android:transitionName="buffer_view"
        android:visibility="gone">

    </ProgressBar>
</merge>

接着我们自定义一个View,

/**
 * 列表播放使用
 */
public class ListPlayerView extends FrameLayout {
    public View bufferView;
    public PPImageView cover, blur;
    protected ImageView playBtn;

    public ListPlayerView(@NonNull Context context) {
        this(context,null);
    }

    public ListPlayerView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ListPlayerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.layout_player_view, this, true);

        //缓冲转圈圈的view
        bufferView = findViewById(R.id.buffer_view);
        //封面view
        cover = findViewById(R.id.cover);
        //高斯模糊背景图,防止出现两边留嘿
        blur = findViewById(R.id.blur_background);
        //播放盒暂停的按钮
        playBtn = findViewById(R.id.play_btn);
    }
}

接着就是我们跟图片展示一样,计算显示

protected void setSize(int widthPx, int heightPx) {
        //这里主要是做视频宽大与高,或者高大于宽时  视频的等比缩放
        int maxWidth = PixUtils.getScreenWidth();
        int maxHeight = maxWidth;

        int layoutWidth = maxWidth;
        int layoutHeight = 0;

        int coverWidth;
        int coverHeight;
        if (widthPx >= heightPx) {
            coverWidth = maxWidth;
            layoutHeight = coverHeight = (int) (heightPx / (widthPx * 1.0f / maxWidth));
        } else {
            layoutHeight = coverHeight = maxHeight;
            coverWidth = (int) (widthPx / (heightPx * 1.0f / maxHeight));
        }

        ViewGroup.LayoutParams params = getLayoutParams();
        params.width = layoutWidth;
        params.height = layoutHeight;
        setLayoutParams(params);

        ViewGroup.LayoutParams blurParams = blur.getLayoutParams();
        blurParams.width = layoutWidth;
        blurParams.height = layoutHeight;
        blur.setLayoutParams(blurParams);

        FrameLayout.LayoutParams coverParams = (LayoutParams) cover.getLayoutParams();
        coverParams.width = coverWidth;
        coverParams.height = coverHeight;
        coverParams.gravity = Gravity.CENTER;
        cover.setLayoutParams(coverParams);

        FrameLayout.LayoutParams playBtnParams = (LayoutParams) playBtn.getLayoutParams();
        playBtnParams.gravity = Gravity.CENTER;
        playBtn.setLayoutParams(playBtnParams);
        
    }

OK,这样我们首页整个Item的布局就写完了