效果圖展示
1.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
? ? tools:context=".MainActivity">
? ? <!--因為要在一個Activtiy中完成,所以在RecyclerView下面放ViewPager和TextView,TextView用來顯示下方的數字-->
? ? <android.support.v7.widget.RecyclerView
? ? ? ? android:id="@+id/lv"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent" />
? ? <android.support.v4.view.ViewPager
? ? ? ? android:id="@+id/vp"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent"
? ? ? ? android:visibility="gone" />
? ? <TextView
? ? ? ? android:id="@+id/txt"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignParentBottom="true"
? ? ? ? android:layout_centerHorizontal="true"
? ? ? ? android:textColor="#FFFFFF"
? ? ? ? android:textSize="23sp"
? ? ? ? android:visibility="gone" />
</RelativeLayout>
2.MainActivity中
public class MainActivity extends AppCompatActivity implements MyWelfareAdapter.OnClickListener {
? ? private RecyclerView lv;
? ? private ArrayList<WelfareBean.ResultsBean> list;
? ? private MyWelfareAdapter adapter;
? ? private String url = "接口地址";
? ? private static final String TAG = "MainActivity----";
? ? private ArrayList<View> viewList;
? ? private ViewPager vp;
? ? private TextView txt;
? ? private MyPagerAdapter pagerAdapter;
? ? private ImageView img;
? ? private int position;
? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? initView();
? ? ? ? initData();
? ? }
? ? private void initData() {
? ? ? ? OkHttpClient httpClient = new OkHttpClient.Builder().build();
? ? ? ? Request request = new Request.Builder()
? ? ? ? ? ? ? ? .url(url)
? ? ? ? ? ? ? ? .build();
? ? ? ? Call call = httpClient.newCall(request);
? ? ? ? call.enqueue(new Callback() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onFailure(Call call, IOException e) {
? ? ? ? ? ? ? ? Log.e(TAG, "onFailure: " + e.getMessage());
? ? ? ? ? ? }
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onResponse(Call call, Response response) throws IOException {
? ? ? ? ? ? ? ? final String string = response.body().string();
? ? ? ? ? ? ? ? runOnUiThread(new Runnable() {
? ? ? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? ? ? public void run() {
? ? ? ? ? ? ? ? ? ? ? ? final Gson gson = new Gson();
? ? ? ? ? ? ? ? ? ? ? ? WelfareBean welfareBean = gson.fromJson(string, WelfareBean.class);
? ? ? ? ? ? ? ? ? ? ? ? list.addAll(welfareBean.getResults());
? ? ? ? ? ? ? ? ? ? ? ? adapter.notifyDataSetChanged();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? private void initView() {
? ? ? ? lv = (RecyclerView) findViewById(R.id.lv);
? ? ? ? vp = (ViewPager) findViewById(R.id.vp);
? ? ? ? txt = (TextView) findViewById(R.id.txt);
? ? ? ? list = new ArrayList<>();
? ? ? ? viewList = new ArrayList<>();
? ? ? ? adapter = new MyWelfareAdapter(this, list);
? ? ? ? lv.setAdapter(adapter);
? ? ? ? StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
? ? ? ? layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);//不設置的話，圖片閃爍錯位，有可能有整列錯位的情況。
? ? ? ? lv.setLayoutManager(layoutManager);
? ? ? ? pagerAdapter = new MyPagerAdapter(this, viewList);
? ? ? ? vp.setAdapter(pagerAdapter);
? ? ? ? //RecyclerView的監聽方法
? ? ? ? adapter.setOnClickListener(this);
? ? ? ? //ViewPager的監聽方法
? ? ? ? vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onPageScrolled(int i, float v, int i1) {
? ? ? ? ? ? }
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onPageSelected(int i) {
? ? ? ? ? ? ? ? txt.setText(i + 1 + "/" + 20);//索引是從0開始,所以讓i+1
? ? ? ? ? ? }
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onPageScrollStateChanged(int i) {
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? @Override
? ? public void OnClick(int position, WelfareBean.ResultsBean resultsBean, ArrayList<WelfareBean.ResultsBean> list) {
? ? ? ? //點擊Item條目時讓RecyclerView隱藏,ViewPager和TextView顯示
? ? ? ? lv.setVisibility(View.GONE);
? ? ? ? vp.setVisibility(View.VISIBLE);
? ? ? ? txt.setVisibility(View.VISIBLE);
? ? ? ? this.position = position;
? ? ? ? for (int i = 0; i < list.size(); i++) {
? ? ? ? ? ? //自定義一個布局,用于顯示圖片的.
? ? ? ? ? ? View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_image, null);
? ? ? ? ? ? img = view.findViewById(R.id.img);
? ? ? ? ? ? img.setOnClickListener(new View.OnClickListener() {
? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? public void onClick(View v) {
? ? ? ? ? ? ? ? ? //當點擊圖片的時候讓RecyclerView顯示,vp和txt隱藏
? ? ? ? ? ? ? ? ? ? lv.setVisibility(View.VISIBLE);
? ? ? ? ? ? ? ? ? ? vp.setVisibility(View.GONE);
? ? ? ? ? ? ? ? ? ? txt.setVisibility(View.GONE);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? //點擊哪個圖片顯示哪個圖片
? ? ? ? ? ? vp.setCurrentItem(position);
? ? ? ? ? ? Glide.with(MainActivity.this).load(list.get(i).getUrl()).into(img);
? ? ? ? ? ? viewList.add(view);
? ? ? ? }
? ? ? ? pagerAdapter.notifyDataSetChanged();
? ? }
