（仿头条APP项目）7.首页标签页完善和微头条页面设计实现
2024-03-22 13:28:29
文章目录
- 一.首页标签页完善
- 效果图
- 具体实现
- 二.微头条页面设计实现
- 效果图
- 实现思路
- 具体实现
- 布局
- 微头条页面实体类
- 业务逻辑代码
一.首页标签页完善
- 在之前已经把首页北京标签的新闻列表页面基本上开发完成了。完成了一个页面的开发之后，其他页面只需要改相关的标题，图片，日期等信息就行了。信息直接从服务端获取。
效果图
具体实现
将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.首页标签页完善和微头条页面设计实现相关推荐
- 头条App项目测试实战（七）实名认证功能用例设计
实名认证 描述:有些功能操作中涉及到多步流程,下面看下在黑马头条中实名认证流程的功能测试.在这个功能点中我们重点关注测试的步骤流程,具体的细节部分(图片上传)将不再考虑. 效果: 测试用例设计与评审 ...
- 头条App项目测试实战（二）App手工测试流程以及需求分析与评审
熟悉头条App项目步骤: 业务特性 用户与角色 组织架构图 技术栈 头条App测试流程(一次迭代) 测试流程 需求分析与评审 编写测试计划(测试方案) 设计测试用例与评审 执行测试用例与缺陷跟踪 编写 ...
- html 仿饿了点餐页面,JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
说在前面:必须是基于支持H5的浏览器才可以 这个 API 本身非常简单,由以下三部分组成. document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小 ...
- HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...
- div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...
- DIV布局大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:仿悦世界游戏网站设计--仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- （仿头条APP项目）2.主界面按钮切换Fragment页面
文章目录 主界面按钮切换Fragment页面 效果展示 框架结构 xml视图 主视图 选择器和style java代码模块 创建4个Fragment 1.绑定按钮选择事件 2.初始化和用HashMap ...
- （仿头条APP项目）5.列表页面设计实现
文章目录 列表页面设计 效果图 具体实现 添加Glide依赖 添加主页面和两个列表布局 用GsonFormat快速创建NewListData实体类存放新闻列表数据 MyApi添加一个获取新闻列表的方法 ...
- （仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录 一.点击过的新闻列表文字变灰 效果图 实现思路 导入ormlite数据库类依赖 利用ormlite创建数据库和表 创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
最新文章
- OpenCV学习笔记（一） 环境配置
- yum配置中driver-class-name: com.mysql.jdbc.Driver报错
- 计算机图形学颜色表示,计算机图形学 颜色表示模型.ppt
- 实验五 burpsuite重放攻击实验
- 恒大汽车：仍在就出售新能源汽车生活项目等资产进行磋商
- Abp vnext Web应用程序开发教程 4 —— 集成测试
- 工厂模式 java_JAVA设计模式之工厂模式(简单工厂模式+工厂方法模式)
- 手机平板巡检系统，掀起设备巡检的第2次革命
- hibernate 批量插入 Batch
- 【Python：统一时间格式YYYY-MM-DD】时间数据、格式处理、并根据时间合并dataframe
- FineReport.10 一（帆软）（报表基础练习）
- 获取微信公众号用户的openid
- php文件打开老是自动下载
- 蜗居中折射的三类男人
- 阿里云CDN工作原理、使用场景及产品优势简介
- C++11中的原子操作（atomic operation）和自旋锁
- Ubuntu完全教程
- Splunk中12小时制AM/PM的日期转换
- C++模板 —— 万字带你了解C++模板（蓝桥杯算法比赛必备知识STL基础）
- 名帖96 赵孟頫 小楷《汉汲黯传》