生活随笔
收集整理的這篇文章主要介紹了
（仿头条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" ><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 {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
;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState
) {super.onActivityCreated(savedInstanceState
);retrofit
.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();}});}class 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
);imageView
.setScaleType(ImageView
.ScaleType
.FIT_XY
);}}private void setDataToView(final List
<PicData
.PicDataBean
.PicNewsBean
> news
) {PicAdapter adapter
=new PicAdapter(getContext(),R
.layout
.item_list_pic
,news
);listView
.setAdapter(adapter
);gridView
.setAdapter(adapter
);}
}
總結
以上是生活随笔為你收集整理的（仿头条APP项目）7.首页标签页完善和微头条页面设计实现的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
