Android水平图像列表,每个上都有关闭按钮

时间:2017-10-04 06:55:31

标签: android android-layout android-recyclerview recyclerview-layout

我正在开发一个应用程序,其中我有一个带有两个片段的视图寻呼机。在第二个片段中,我想显示从相机捕获的图像列表或逐个从图库中选择的图像列表。因此,在选择或捕获每个图像后,图像列表会增加。

我可以捕捉图像或点击片段2中的按钮从图库中选择。每次我这样做,我将图像保存在内部存储和数组列表中的路径。

我在图像视图中显示路径数组列表中的所有图像,并在每个图像上用关闭按钮水平滚动。 close函数也在片段2中,因为列表是片段,我必须从中删除路径。

因此,我在堆栈上使用了最高的投票答案。链接如下:

A procurement order has been placed for a RAM with 128 Gig

现在需要:我需要在底部显示页面或项目指示符点,图像具有关闭按钮,以便用户可以知道他在哪个图像或页面上。

以下是我需要开发的图像。

enter image description here

如何做到这一点我无法理解。请指导我。我花了很多时间在那上面。

2 个答案:

答案 0 :(得分:0)

我尝试过这样做并实现了它。

以下是fragment class

 public class DisplayImageFragment extends BaseFragment implements ViewPager.OnPageChangeListener {

    private RadioGroup mIndicators;
    private ViewPager mPager;
    private List<Image> sliderItems;
    private Bundle bundle;

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.display_image_fragment, container, false);
        mIndicators = (RadioGroup) getView().findViewById(R.id.page_indicator);
        mPager = (ViewPager) getView().findViewById(R.id.viewPager);

        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        mPager.setOnPageChangeListener(this);

        this.bundle = getArguments();
        if (bundle != null) {
            sliderItems = bundle.getParcelableArrayList(IMAGES_LIST);
        }
        setUpRadioIndicators(sliderItems);

        // build pager adapter
        ViewPagerAdapter adapter = (ViewPagerAdapter) mPager.getAdapter();

        if (adapter != null) {
            adapter.notifyPagerAdapter(sliderItems);
        } else {
            adapter = new ViewPagerAdapter(getContext(), sliderItems);
            mPager.setAdapter(adapter);
        }
    }

    private void setUpRadioIndicators(List<Image> sliderItems) {
        mIndicators.removeAllViews();

        for (int i = 0; i < sliderItems.size(); i++) {
            mIndicators.addView(getIndicator(i));
        }

        // default item
        if (sliderItems.size() > 0) {
            ((RadioButton) mIndicators.getChildAt(0)).setChecked(true);
        }
    }

    private RadioButton getIndicator(int position) {
        RadioButton radioButton = new RadioButton(getContext());
        radioButton.setButtonDrawable(null);
        radioButton.setId(position);

        int btnSize = (int) getResources().getDimension(R.dimen.radio_drawable_size);
        RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(btnSize, btnSize);
        params.setMargins(5, 0, 5, 0);
        radioButton.setLayoutParams(params);

        radioButton.setBackgroundDrawable(getResources()
                .getDrawable(R.drawable.slider_indicator_selector));

        return radioButton;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        ((RadioButton) mIndicators.getChildAt(position)).setChecked(true);
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }}

以下是display_image_fragment.xml

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RadioGroup
        android:id="@+id/page_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" />

   </RelativeLayout>

以下是slider_indicator_selected.xml:     

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_pressed="true"/>

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_checked="true"/>

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_focused="true" />

    <item android:drawable="@drawable/slider_indicator_unselected" />

</selector>

答案 1 :(得分:0)

我已经实施了可能对您有所帮助的演示。 你可以通过以下链接。 Demo