以编程方式在RecyclerView中遮罩图像

时间：2020-06-27 06:29:02

标签： java android android-studio user-interface

我有通过RecyclerView显示的主要布局清单。我希望它看起来像这样： Expected layout

我正在使用简单的方形.jpg图片，并且我想在所有列表中应用一致的蒙版（单个对象，按代码排列）。 有一些制作口罩的答案，但我似乎无法将其应用于我的需要， 因为所有或大多数都指的是简单的布局或单个ImageView，但是在我的情况下应该如何工作？代码：

activity_main.xml 

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/colorPrimaryLight"
    tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
    android:id="@+id/tb"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="25dp"
    android:soundEffectsEnabled="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tb" />

<com.google.android.material.navigation.NavigationView
    android:layout_width="50dp"
    android:layout_height="16dp"
    app:layout_constraintBottom_toBottomOf="@id/tb"
    app:layout_constraintEnd_toEndOf="@id/tb"
    app:layout_constraintHorizontal_bias="0.083"
    app:layout_constraintStart_toStartOf="@id/tb"
    app:layout_constraintTop_toTopOf="@id/tb"
    app:layout_constraintVertical_bias="0.4" />
</androidx.constraintlayout.widget.ConstraintLayout>

item_layout.xml 

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="124dp"
        android:layout_height="130dp"
        android:contentDescription="@string/descriptor"
        app:layout_constraintBottom_toBottomOf="@id/btn_read_more"
        app:layout_constraintEnd_toEndOf="@id/btn_read_more"
        app:layout_constraintHorizontal_bias="0.947"
        app:layout_constraintStart_toStartOf="@id/btn_read_more"
        app:layout_constraintTop_toTopOf="@id/btn_read_more"
        app:layout_constraintVertical_bias="0.421"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/textTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/descriptor"
        android:textColor="@color/text_color"
        android:textDirection="rtl"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textBody"
        app:layout_constraintEnd_toStartOf="@id/imageView"
        app:layout_constraintHorizontal_bias="0.979"
        app:layout_constraintStart_toStartOf="@id/btn_read_more"
        app:layout_constraintTop_toTopOf="@id/btn_read_more" />

    <TextView
        android:id="@+id/textBody"
        android:layout_width="268dp"
        android:layout_height="90dp"
        android:text="@string/descriptor"
        android:textColor="@color/text_color"
        android:textDirection="rtl"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/btn_read_more"
        app:layout_constraintTop_toBottomOf="@id/textTitle"
        app:layout_constraintStart_toStartOf="@id/btn_read_more"
        app:layout_constraintEnd_toStartOf="@id/imageView"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="45dp" />

    <Button
        android:id="@+id/btn_read_more"
        android:layout_width="408dp"
        android:layout_height="149dp"
        android:layout_marginStart="2dp"
        android:layout_marginTop="2dp"
        android:layout_marginEnd="1dp"
        android:background="#00FAFAFA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java 

package com.example.mytrip;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.Menu;

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

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    @Override
    // show the settings overflow menu
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // setting the a tool bar as an action bar
        Toolbar action_bar = (Toolbar) findViewById(R.id.tb);
        setSupportActionBar(action_bar);

        recyclerView = findViewById(R.id.rv);
        // setting a linear layout (vertical) for the recycle view
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        // filling the array list
        List<ModelClass> modelClassList = new ArrayList<>();
        modelClassList.add(new ModelClass(R.drawable.shofet_pic, getString(R.string.shofet_title),
                this.getResources().getString(R.string.shofet_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.dor_pic, getString(R.string.dor_title),
                this.getResources().getString(R.string.dor_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.sorek_pic, getString(R.string.sorek_title),
                this.getResources().getString(R.string.sorek_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.red_pic, getString(R.string.red_title),
                this.getResources().getString(R.string.red_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.ayun_pic, getString(R.string.ayun_title),
                this.getResources().getString(R.string.ayun_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.gedi_pic, getString(R.string.gedi_title),
                this.getResources().getString(R.string.gedi_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.ofir_pic, getString(R.string.ofir_title),
                this.getResources().getString(R.string.ofir_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.sharon_pic,  getString(R.string.sharon_title),
                this.getResources().getString(R.string.sharon_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.meron_pic,  getString(R.string.meron_title),
                this.getResources().getString(R.string.meron_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.snir_pic,  getString(R.string.snir_title),
                this.getResources().getString(R.string.snir_desc).substring(0,75) + "..."));
        modelClassList.add(new ModelClass(R.drawable.cave_pic,getString(R.string.cave_title),
                this.getResources().getString(R.string.cave_desc).substring(0,75) + "..."));
        // using the adapter class
        Adapter adapter = new Adapter(modelClassList);
        recyclerView.setAdapter(adapter);
        adapter.notifyDataSetChanged();
    }
}

Adapter.java 

package com.example.mytrip;

import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;


import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class Adapter extends RecyclerView.Adapter<Adapter.Viewholder> {

    private List<ModelClass> modelClassList;
    public Adapter(List<ModelClass> modelClassList) {
        this.modelClassList = modelClassList;
    }

    @NonNull
    @Override
    public Viewholder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout,
                viewGroup, false);
        return new Viewholder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final Viewholder viewholder, final int position) {
        final int resource = modelClassList.get(position).getImageIcon();
        final String title = modelClassList.get(position).getTitle();
        final String body = modelClassList.get(position).getBody();

        viewholder.btnReadMore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(v.getContext(), AllTripInfo.class);
                intent.putExtra("tripId", position);
                v.getContext().startActivity(intent);
            }

        });
        viewholder.setData(resource, title, body);
    }

    @Override
    public int getItemCount() {
        return modelClassList.size();
    }

    static class Viewholder extends RecyclerView.ViewHolder{

        private ImageView imageView;
        private TextView title;
        private TextView body;
        Button  btnReadMore;

        public Viewholder(@NonNull View itemView) {
            super(itemView);
            btnReadMore = itemView.findViewById(R.id.btn_read_more);
            imageView = itemView.findViewById(R.id.imageView);
            title = itemView.findViewById(R.id.textTitle);
            body = itemView.findViewById(R.id.textBody);
        }

        private void setData(int imageResource, String titleText, String bodyText)
        {
            imageView.setImageResource(imageResource);
            title.setText(titleText);
            body.setText(bodyText);
            }

    }

}

ModelClass.java 

package com.example.mytrip;

public class ModelClass {

    private  int imageIcon;
    String title;
    String body;

    public ModelClass(int imageIcon, String title, String body) {
        this.imageIcon = imageIcon;
        this.title = title;
        this.body = body;
    }

    public int getImageIcon() {
        return imageIcon;
    }

    public String getTitle() {
        return title;
    }

    public String getBody() {
        return body;
    }


}

为了答案，我想要一个圆形的蒙版，无论是通过编程还是通过Photoshop提取的白色.png。 也欢迎以任何方式优化我的代码的任何其他提示。我绝对必须对列表本身本身不可点击，而是在顶部具有一个透明的大按钮这一事实做些事情。 谢谢！

1 个答案:

答案 0 :(得分：1)

Ronny在您的Item_layout中进行更改。

  1. 只需在您的应用程序级gradle文件中添加circleImage库。 CircleImageView

您的商品布局如下：

<RelativeLayout>

<Text></Text>
<de.hdodenhof.circleimageview.CircleImageView>
//add endParent= true
</de.hdodenhof.circleimageview.CircleImageView>

</RelativeLayout>
相关问题
最新问题