（仿頭條APP項目）7.首頁標籤頁完善和微頭條頁面設計實現

一.首頁標籤頁完善

• 在之前已經把首頁北京標籤的新聞列表頁面基本上開發完成了。完成了一個頁面的開發之後，其他頁面只需要改相關的標題，圖片，日期等信息就行了。信息直接從服務端獲取。

效果圖

具體實現

將MyApi中的getNewList方法增加一個變量（具體標籤頁信息的地址）和BaseUrl地址拼接。

在NewListFragment 中定義一個變量存放具體標籤頁的地址

添加帶參數loadFirstUrl的構造方法，這樣就可以在創建NewListFragment對象時將loadFirstUrl傳入。

在HomeFragment中的MyPagerAdapter構造方法中將標籤頁地址傳入NewListFragment對象中。

二.微頭條頁面設計實現

效果圖

實現思路

• 在TalkFragment中添加圖片按鈕點擊事件來切換列表視圖和網格視圖
• 獲取服務端數據
• 設置適配器

具體實現

佈局

主頁面fragment_pic.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" 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"    >
    <RelativeLayout
        android:background="#FF4444"
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:text="微頭條"
            android:layout_centerInParent="true"
            style="@style/Title" />
        <ImageView
            android:id="@+id/switchBtn"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            style="@style/Switch" />
    </RelativeLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">
        <ListView
            android:id="@+id/listview"

            android:dividerHeight="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </ListView>
        <GridView
            android:visibility="gone"
            android:id="@+id/gridview"
            android:numColumns="2"

            android:horizontalSpacing="10dp"
            android:verticalSpacing="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </GridView>
    </FrameLayout>


</LinearLayout>

列表和網格佈局item_list_pic

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" 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:padding="10dp"
android:background="#FFFFFF"
android:layout_height="match_parent">

    <ImageView
        android:id="@+id/item_image_pic"
        android:background="#C80000"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <TextView
        android:id="@+id/item_title_pic"
        android:layout_width="match_parent"
        android:lines="1"
        android:textSize="23sp"
        android:text="我是標題"
        android:layout_height="wrap_content" />


</LinearLayout>

微頭條頁面實體類

GsonFormat插件快捷創建
PicData

package com.xzit.bean;

import java.util.List;

public class PicData {
    public PicDataBean data;
    public int retcode;
    public static class PicDataBean {
        public String countcommenturl;
        public String more;
        public String title;
        public List<PicNewsBean> news;
        public List<?> topic;
        public static class PicNewsBean {
            public boolean comment;
            public String commentlist;
            public String commenturl;
            public int id;
            public String largeimage;
            public String listimage;
            public String pubdate;
            public String smallimage;
            public String title;
            public String type;
            public String url;
        }
    }
}

業務邏輯代碼

• 在TalkFragment中添加圖片按鈕點擊事件來切換列表視圖和網格視圖
• 獲取服務端數據
• 設置適配器

package com.xzit.fragment;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.administrator.zhjrtt.R;
import com.joanzapata.android.BaseAdapterHelper;
import com.joanzapata.android.QuickAdapter;
import com.xzit.bean.PicData;
import com.xzit.net.MyApi;

import java.util.List;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class TalkFragment extends BaseFragment {
    //1.佈局
    //變量設置視圖是否可見
    private  boolean isListVisible = true;
    ListView listView;
    GridView gridView;
    @Override
    protected View getMyView() {
        View view= View.inflate(getContext(), R.layout.fragment_pic,null);
        //查找控件
          listView=view.findViewById(R.id.listview);
         gridView=view.findViewById(R.id.gridview);
        ImageView swtichBtn = view.findViewById(R.id.switchBtn);
        //點擊事件
        swtichBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isListVisible){
                    isListVisible = false;
                    listView.setVisibility(View.GONE);
                    gridView.setVisibility(View.VISIBLE);
                }else {
                    isListVisible = true;
                    listView.setVisibility(View.VISIBLE);
                    gridView.setVisibility(View.GONE);
                }
            }
        });
        return view;
    }
    //2.獲取服務端數據

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //retrofit
        retrofit.create(MyApi.class).getPicData().enqueue(new Callback<PicData>() {
            @Override
            public void onResponse(Call<PicData> call, Response<PicData> response) {
                //成功
                Toast.makeText(getContext(), response.body().data.title, Toast.LENGTH_SHORT).show();
                setDataToView(response.body().data.news);
            }

            @Override
            public void onFailure(Call<PicData> call, Throwable t) {
                //失敗
                Toast.makeText(getContext(), "失敗", Toast.LENGTH_SHORT).show();
            }
        });
    }
    //3.2編寫QuitkAdapter
     class PicAdapter extends QuickAdapter<PicData.PicDataBean.PicNewsBean>{


         public PicAdapter(Context context, int layoutResId, List<PicData.PicDataBean.PicNewsBean> data) {
             super(context, layoutResId, data);
         }

         @Override
         protected void convert(BaseAdapterHelper helper, PicData.PicDataBean.PicNewsBean item) {
             helper.setText(R.id.item_title_pic,item.title);
             ImageView imageView = helper.getView(R.id.item_image_pic);
             String url = item.listimage.replace("http://10.0.2.2:8080/",HOST);
             Glide.with(getContext()).load(url).into(imageView);
             //3.4設置圖片縮放
             imageView.setScaleType(ImageView.ScaleType.FIT_XY);
         }
     }
    //3.將數據設置給佈局
    private void setDataToView(final List<PicData.PicDataBean.PicNewsBean> news) {
        //3.1佈局條目錄
        //3.2編寫QuitkAdapter

        //3.3 創建適配器，賦值給ListView，還賦值給gridView
        PicAdapter adapter =new PicAdapter(getContext(),R.layout.item_list_pic,news);
        listView.setAdapter(adapter);
        gridView.setAdapter(adapter);
    }
}