文章目錄

• • 一.首頁標簽頁完善
  • • 效果圖
    • 具體實現
  • 二.微頭條頁面設計實現
  • • 效果圖
    • 實現思路
    • 具體實現
    • • 布局
      • 微頭條頁面實體類
    • 業務邏輯代碼

一.首頁標簽頁完善

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

效果圖

具體實現

將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" ><RelativeLayoutandroid:background="#FF4444"android:layout_width="match_parent"android:layout_height="40dp"><TextViewandroid:text="微頭條"android:layout_centerInParent="true"style="@style/Title" /><ImageViewandroid:id="@+id/switchBtn"android:layout_centerVertical="true"android:layout_alignParentRight="true"style="@style/Switch" /></RelativeLayout><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:padding="10dp"><ListViewandroid:id="@+id/listview"android:dividerHeight="10dp"android:layout_width="match_parent"android:layout_height="match_parent"></ListView><GridViewandroid: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"><ImageViewandroid: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" /><TextViewandroid: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;@Overrideprotected 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() {@Overridepublic 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.獲取服務端數據@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);//retrofitretrofit.create(MyApi.class).getPicData().enqueue(new Callback<PicData>() {@Overridepublic void onResponse(Call<PicData> call, Response<PicData> response) {//成功Toast.makeText(getContext(), response.body().data.title, Toast.LENGTH_SHORT).show();setDataToView(response.body().data.news);}@Overridepublic void onFailure(Call<PicData> call, Throwable t) {//失敗Toast.makeText(getContext(), "失敗", Toast.LENGTH_SHORT).show();}});}//3.2編寫QuitkAdapterclass PicAdapter extends QuickAdapter<PicData.PicDataBean.PicNewsBean>{public PicAdapter(Context context, int layoutResId, List<PicData.PicDataBean.PicNewsBean> data) {super(context, layoutResId, data);}@Overrideprotected 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，還賦值給gridViewPicAdapter adapter =new PicAdapter(getContext(),R.layout.item_list_pic,news);listView.setAdapter(adapter);gridView.setAdapter(adapter);} }

總結

以上是生活随笔為你收集整理的（仿头条APP项目）7.首页标签页完善和微头条页面设计实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。