Question

我想开发应用程序，用户可以从库中选择多张照片并添加标题，就像whatsapp中的标题一样，可以在多个图像中添加标题任何人都可以帮助我。

Answer 1

如果你正在寻找这个，

你在正确的地方，
以下是我为帮助初学者所做的全面解决方案：

布局用户界面设计

<ImageView
    android:contentDescription="@string/app_name"
    android:id="@+id/currentStreamImage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"/>

<ImageView
    android:id="@+id/selected_photo"
    android:contentDescription="@string/app_name"
    android:background="@null"
    android:layout_margin="12dp"
    android:layout_alignParentEnd="true"
    android:src="@drawable/add_image_icon"
    android:layout_width="40dp"
    android:layout_height="40dp" />

<LinearLayout
    android:layout_alignParentBottom="true"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:padding="10dp"
        android:background="@drawable/fade_in_black"
        android:id="@+id/captionArea"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <EditText
        android:id="@+id/caption"
        android:hint="@string/enter_caption_here"
        android:textStyle="italic"
        android:textColor="@android:color/white"
        android:textColorHint="@android:color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_menu_send" />

    </LinearLayout>


<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="100dp"/>

</LinearLayout>

<强> AddImageWithCaptionFragment

public class AddImageWithCaptionFragment extends Fragment implements ImageWithCaptionListener {

private ArrayList<ImgCap> imgCapArrayList = new ArrayList<>();
private PerfectAdapter adapter;
private RecyclerView recyclerView;
private ImageView select,mainStream;
private EditText captionEt;
private int mCurrentPosition;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.add_img_with_cap_layout, container, false);

    recyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
    select = (ImageView) view.findViewById(R.id.selected_photo);
    mainStream = (ImageView) view.findViewById(R.id.currentStreamImage);
    captionEt = (EditText) view.findViewById(R.id.caption);

    select.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            TedBottomPicker bottomSheetDialogFragment = new TedBottomPicker.Builder(getActivity())
                    .setOnMultiImageSelectedListener(new TedBottomPicker.OnMultiImageSelectedListener() {
                        @Override
                        public void onImagesSelected(ArrayList<Uri> uriList) {

                            imgCapArrayList.clear();
                            for (int i=0;i<uriList.size();i++) {
                                ImgCap imgCap = new ImgCap(i,"", uriList.get(i));
                                imgCapArrayList.add(imgCap);
                            }

                            adapter = new PerfectAdapter(getActivity(),imgCapArrayList,mainStream,AddImageWithCaptionFragment.this);
                            LinearLayoutManager mLayoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
                            recyclerView.setLayoutManager(mLayoutManager);
                            recyclerView.setAdapter(adapter);
                        }
                    })
                    .setPeekHeight(1600)
                    .showTitle(false)
                    .setCompleteButtonText("Done")
                    .setEmptySelectionText("No Select")
                    .create();

            bottomSheetDialogFragment.show(getActivity().getSupportFragmentManager());

        }
    });

    captionEt.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            imgCapArrayList.get(mCurrentPosition).setCaption(s.toString());
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });

    return view;
}

@Override
public void imgCaptionCallBack(int position) {
    mCurrentPosition = position;
    captionEt.setText(imgCapArrayList.get(mCurrentPosition).getCaption());
}
}

自定义适配器类

public class PerfectAdapter extends RecyclerView.Adapter<PerfectAdapter.MyViewHolder>{

private LayoutInflater inflater;
private Context context;
private ArrayList<ImgCap> imgCapsList;
private ImageView mainStream;
private ImageWithCaptionListener mCallBack;

public PerfectAdapter(Context context,ArrayList<ImgCap> imgCapsList,ImageView mainStream,ImageWithCaptionListener mCallBack) {
    inflater = LayoutInflater.from(context);
    this.context = context;
    this.imgCapsList = imgCapsList;
    this.mainStream = mainStream;
    this.mCallBack = mCallBack;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = inflater.inflate(R.layout.image_item_layout, parent, false);
    return  new MyViewHolder(view);
}

@Override
public void onBindViewHolder(MyViewHolder holder,final int position) {
    final ImgCap element = imgCapsList.get(holder.getAdapterPosition());
    Glide.with(context).load(element.getImagePath()).into(holder.image);
    Glide.with(context).load(imgCapsList.get(0).getImagePath()).into(mainStream);

    holder.image.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Glide.with(context).load(element.getImagePath()).into(mainStream);
            mCallBack.imgCaptionCallBack(position);
        }
    });
}

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

class MyViewHolder extends RecyclerView.ViewHolder
{
    ImageView image;

    public MyViewHolder(View itemView) {
        super(itemView);
        image = (ImageView) itemView.findViewById(R.id.image);
    }
}
}

CallBack的监听器类

public interface ImageWithCaptionListener {

void imgCaptionCallBack(int position);

}

项目布局

<RelativeLayout
    android:background="@android:color/white"
    android:padding="1dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<ImageView
    android:contentDescription="@string/app_name"
    android:id="@+id/image"
    android:scaleType="centerCrop"
    android:layout_width="100dp"
    android:layout_height="100dp" />

</RelativeLayout>

POJO班级

public class ImgCap {

private int position;
private String caption;
private Uri imagePath;

public ImgCap(int position, String caption, Uri imagePath) {
    this.position = position;
    this.caption = caption;
    this.imagePath = imagePath;
}

public int getPosition() {
    return position;
}

public String getCaption() {
    return caption;
}

public Uri getImagePath() {
    return imagePath;
}

public void setPosition(int position) {
    this.position = position;
}

public void setCaption(String caption) {
    this.caption = caption;
}

public void setImagePath(Uri imagePath) {
    this.imagePath = imagePath;
}
}

只需复制并粘贴，享受!!!

像图像的Whatsapp选择并添加标题

1 个答案: