android php news,Android仿新闻顶部导航标签切换效果

最新推荐文章于 2021-05-27 23:06:08 发布
最新推荐文章于 2021-05-27 23:06:08 发布
阅读量117 收藏
点赞数
文章标签： android php news

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。

806e7ea2965ac649440c0d7df3333f04.png

那么大致上我们会用到这些知识。

1.Fragment

2.FragmentPagerAdapter

3.HorizontalScrollView

4.PopupWindow

ok,那么首先进入第一步。

为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了。所以这里就自定义一个HorizontalScrollViewimport android.app.Activity;

import android.content.Context;

import android.util.AttributeSet;

import android.view.View;

import android.widget.HorizontalScrollView;

import android.widget.ImageView;

/**

* 自定义垂直滑动View

*

*/

public class ColumnHorizontalScrollView extends HorizontalScrollView {

//传入的布局

private View ll_content;

//更多栏目的布局

private View ll_more;

//拖动栏布局

private View rl_colnmn;

//左阴影布局

private ImageView leftImage;

//右阴影布局

private ImageView rightImage;

//屏幕宽度

private int mScreenWidth =0;

//父类活动的activity

private Activity activity;

public ColumnHorizontalScrollView(Context context) {

super(context);

}

public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public ColumnHorizontalScrollView(Context context, AttributeSet attrs,

int defStyle) {

super(context, attrs, defStyle);

}

/**

* 拖动的时候执行的事件

* @param l

* @param t

* @param oldl

* @param oldt

*/

@Override

protected void onScrollChanged(int l, int t, int oldl, int oldt) {

super.onScrollChanged(l, t, oldl, oldt);

//先设置左右的阴影

shade_ShowOrHide();

if(!activity.isFinishing() && ll_content != null && leftImage!= null && rightImage != null){

if(ll_content.getWidth() <= mScreenWidth){

leftImage.setVisibility(View.GONE);

rightImage.setVisibility(View.GONE);

}

}else {

return ;

}

if(l == 0){

leftImage.setVisibility(View.GONE);

rightImage.setVisibility(View.VISIBLE);

return ;

}

if(ll_content.getWidth() - l + ll_more.getWidth() + rl_colnmn.getLeft() == mScreenWidth){

leftImage.setVisibility(View.VISIBLE);

rightImage.setVisibility(View.GONE);

return ;

}

leftImage.setVisibility(View.VISIBLE);

rightImage.setVisibility(View.VISIBLE);

}

/**

* 传入父类的资源文件等

* @param activity

* @param mScreenWidth

* @param paramView1

* @param paramView2

* @param paramView3

* @param paramView4

* @param paramView5

*/

public void setParam(Activity activity,int mScreenWidth,View paramView1,ImageView paramView2, ImageView paramView3 ,View paramView4,View paramView5)

{

this.activity = activity;

this.mScreenWidth = mScreenWidth;

ll_content = paramView1;

leftImage = paramView2;

rightImage = paramView3;

ll_more = paramView4;

rl_colnmn = paramView5;

}

/**

* 判断左右阴影显示隐藏效果

*/

public void shade_ShowOrHide(){

if(!activity.isFinishing() && ll_content != null){

measure(0,0);

//如果整体的宽度小于屏幕的宽度的话,那左右阴影都隐藏

if(mScreenWidth >= getMeasuredWidth()){

leftImage.setVisibility(View.GONE);

rightImage.setVisibility(View.GONE);

}

}else {

return ;

}

//如果滑动到最左边的时候,左边阴影隐藏,右边显示

if(getLeft() == 0){

leftImage.setVisibility(View.GONE);

rightImage.setVisibility(View.VISIBLE);

return ;

}

//如果滑动在最右边的时候,左边阴影显示,右边隐藏

if(getRight() == getMeasuredWidth() - mScreenWidth){

leftImage.setVisibility(View.VISIBLE);

rightImage.setVisibility(View.GONE);

return ;

}

//否则,说明在中间位置,左右阴影都显示

leftImage.setVisibility(View.VISIBLE);

rightImage.setVisibility(View.VISIBLE);

}

}

完成之后，是不是需要编写Fragment 了? 为了显示图中的效果,这里我们就自定义一个,方便控制import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

/**

* 自定义的Fragment类

*/

public class NewsFragment extends Fragment {

String text;

@Override

public void onCreate(Bundle savedInstanceState) {

Bundle args = getArguments();

text = args != null ? args.getString("text"):"";

super.onCreate(savedInstanceState);

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = LayoutInflater.from(getActivity()).inflate(R.layout.news_fragment,null);

TextView item_textview = (TextView)view.findViewById(R.id.item_textview);

item_textview.setText(text);

return view;

}

}

news_fragment.xml

Ok,为了方便控制,我们来写个适配器import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.app.FragmentTransaction;

import android.view.ViewGroup;

import java.util.ArrayList;

/**

* 消息 Fragment 的适配器

*/

public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {

private ArrayList fragments;//定义一个集合管理所有的fragment

private FragmentManager fm;//fragment 管理器

public NewsFragmentPagerAdapter(FragmentManager fm, ArrayList fragments) {

super(fm);

this.fm = fm;

this.fragments = fragments;

}

@Override

public int getCount() {

return fragments.size();

}

@Override

public android.support.v4.app.Fragment getItem(int position) {

return fragments.get(position);

}

@Override

public int getItemPosition(Object object) {

return POSITION_NONE;

}

//设置集合

public void setFragments(ArrayList fragments) {

if(this.fragments != null){

FragmentTransaction ft = fm.beginTransaction();

for(Fragment f : this.fragments){

ft.remove(f);

}

ft.commit();

ft = null;

fm.executePendingTransactions();

}

this.fragments = fragments;

notifyDataSetChanged();

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

Object obj = super.instantiateItem(container, position);

return obj;

}

}

完成这些,就差不多开始编写Activity 的代码了。import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

import android.util.DisplayMetrics;

import android.view.Gravity;

import android.view.View;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

import android.widget.TextView;

import java.util.ArrayList;

/**

*/

public class MainActivity extends FragmentActivity {

/**自定义的HorizontalScrollView**/

private ColumnHorizontalScrollView mColumnHorizontalScrollView;

private LinearLayout mRadioGroup_content;

private LinearLayout ll_more_columns;

private RelativeLayout rl_colum;

private ViewPager mViewPager;

private ImageView button_more_columns;

private String[] news = new String[] {

"1","2","3","4","5","6","7","8","9","10"

};

//当前选中的栏目

private int colnmuSelectIndex = 0;

//左阴影部分

public ImageView shade_left;

//右阴影部分

public ImageView shade_right;

//屏幕宽度

private int mScreenWidth = 0;

//Item 的高度

private int mItemWidth = 0;

private ArrayList fragments = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.actiivty_top_news);

DisplayMetrics dm = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

mScreenWidth = dm.widthPixels;

mItemWidth = mScreenWidth / 7;// 一个Item宽度为屏幕的1/7

intiViews();

}

private final int SWITCH_PAGE = 0x00123;

private Handler mHandler = new Handler(){

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

switch (msg.what){

case SWITCH_PAGE:

int selectIndex = msg.getData().getInt("selectIndex");

for(int i = 0;i < mRadioGroup_content.getChildCount();i++){

View localView = mRadioGroup_content.getChildAt(i);

if (i != selectIndex)

localView.setSelected(false);

else{

localView.setSelected(true);

mViewPager.setCurrentItem(i);

}

}

break;

}

}

};

/**

* 初始化组件

*/

protected void intiViews() {

mColumnHorizontalScrollView = (ColumnHorizontalScrollView)findViewById(R.id.mColumnHorizontalScrollView);

mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup_content);

ll_more_columns = (LinearLayout) findViewById(R.id.ll_more_columns);

rl_colum = (RelativeLayout) findViewById(R.id.rl_column);

button_more_columns = (ImageView) findViewById(R.id.button_more_columns);

mViewPager = (ViewPager) findViewById(R.id.mViewPager);

shade_left = (ImageView) findViewById(R.id.shade_left);

shade_right = (ImageView) findViewById(R.id.shade_right);

button_more_columns.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

}

});

setChangelView();

}

/**

* 当栏目项发生变化时候调用

* */

private void setChangelView() {

// initColumnData();

initTabColumn();

initFragment();

}

/**

* 初始化Column栏目项

* */

private void initTabColumn() {

//先删除所有的控件

mRadioGroup_content.removeAllViews();

//获取所有的结合

int count = news.length;

//设置自定义的所有布局

mColumnHorizontalScrollView.setParam(this, mScreenWidth, mRadioGroup_content, shade_left, shade_right, ll_more_columns, rl_colum);

for(int i = 0; i< count; i++){

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth , ViewPager.LayoutParams.WRAP_CONTENT);

params.leftMargin = 10;

params.rightMargin = 10;

TextView localTextView = new TextView(this);

localTextView.setTextAppearance(this, R.style.top_category_scroll_view_item_text);

localTextView.setBackgroundResource(R.drawable.radio_buttong_bg);

localTextView.setGravity(Gravity.CENTER);

localTextView.setPadding(5, 0, 5, 0);

localTextView.setId(i);

localTextView.setText(news[i]);

localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day));

if(colnmuSelectIndex == i){

localTextView.setSelected(true);

}

/**

* 设置点击事件

*/

localTextView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

for(int i = 0;i < mRadioGroup_content.getChildCount();i++){

View localView = mRadioGroup_content.getChildAt(i);

if (localView != v)

localView.setSelected(false);

else{

localView.setSelected(true);

mViewPager.setCurrentItem(i);

}

}

}

});

mRadioGroup_content.addView(localTextView, i ,params);

}

}

/**

* 选择的Column里面的Tab

* */

private void selectTab(int tab_postion) {

colnmuSelectIndex = tab_postion;

for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {

View checkView = mRadioGroup_content.getChildAt(tab_postion);

int k = checkView.getMeasuredWidth();

int l = checkView.getLeft();

int i2 = l + k / 2 - mScreenWidth / 2;

mColumnHorizontalScrollView.smoothScrollTo(i2, 0);

}

//判断是否选中

for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) {

View checkView = mRadioGroup_content.getChildAt(j);

boolean ischeck;

if (j == tab_postion) {

ischeck = true;

} else {

ischeck = false;

}

checkView.setSelected(ischeck);

}

}

/**

* 初始化Fragment

* */

private void initFragment() {

int count = news.length;

for(int i = 0; i< count;i++){

Bundle data = new Bundle();

data.putString("text", news[i]);

NewsFragment newfragment = new NewsFragment();

newfragment.setArguments(data);

fragments.add(newfragment);

}

NewsFragmentPagerAdapter mAdapetr = new NewsFragmentPagerAdapter(getSupportFragmentManager(), fragments);

mViewPager.setAdapter(mAdapetr);

mViewPager.setOnPageChangeListener(pageListener);

}

/**

* ViewPager切换监听方法

* */

public ViewPager.OnPageChangeListener pageListener= new ViewPager.OnPageChangeListener(){

@Override

public void onPageScrollStateChanged(int arg0) {

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override

public void onPageSelected(int position) {

// TODO Auto-generated method stub

mViewPager.setCurrentItem(position);

selectTab(position);

}

};

}

actiivty_top_news.xml

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="40.0dip"

android:background="#fff3f3f3"

android:orientation="horizontal" >

android:id="@+id/rl_column"

android:layout_width="match_parent"

android:layout_height="40.0dip"

android:layout_weight="1.0" >

android:id="@+id/mColumnHorizontalScrollView"

android:layout_width="match_parent"

android:layout_height="40.0dip"

android:scrollbars="none" >

android:id="@+id/mRadioGroup_content"

android:layout_width="fill_parent"

android:layout_height="40.0dip"

android:layout_centerVertical="true"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="10.0dip"

android:paddingRight="10.0dip" />

android:id="@+id/shade_left"

android:layout_width="10.0dip"

android:layout_height="40.0dip"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

android:background="@drawable/channel_leftblock"

android:visibility="gone" />

android:id="@+id/shade_right"

android:layout_width="10.0dip"

android:layout_height="40.0dip"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:background="@drawable/channel_rightblock"

android:visibility="visible" />

android:id="@+id/ll_more_columns"

android:layout_width="wrap_content"

android:layout_height="40.0dip" >

android:id="@+id/button_more_columns"

android:layout_width="40.0dip"

android:layout_height="40.0dip"

android:layout_gravity="center_vertical"

android:src="@drawable/channel_glide_day_bg" />

android:id="@+id/category_line"

android:layout_width="fill_parent"

android:layout_height="0.5dip"

android:background="#ffdddddd" />

android:id="@+id/mViewPager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支PHP中文网。

更多Android仿新闻顶部导航标签切换效果相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

叫我洋葱精
关注
Android仿新闻顶部导航标签切换效果
09-01
主要为大家详细介绍了Android仿新闻顶部导航标签切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android—（实现仿网易新闻的顶部导航指示器）
a985548426的博客
08-13 1986
效果图如下，点击对应的Tab标签或者滑动屏幕则可跳转到对应的页面，并且底部的横线也会滑动到对应的Tab标签下面 顶部的导航栏使用三个TextView实现，下划线就是一个ImageView加载了一张横线图片，内容区是用ViewPager实现。 需要注意的是，使用ViewPager控件需要导入Android.support.v4.jar兼容包，不过如果你是使用AndroidStudio
ios-使用标签导航模式
青青子衿
09-07 675
标签导航模式是非常重要的导航模式。使用标签狼时，有一定的指导yuan
Android之高仿今日头条、网易新闻首页动态改变tab
02-28
1.使用horizontalscollview实现头条新闻的效果，动态添加tab页面，2 本地缓存，记录条目数量
android仿各类新闻app标签编辑页实现（改进版）
贾博士的专栏
04-12 2170
android仿各类新闻app标签编辑页实现（改进版） 同类相似产品 网易新闻、今日头条、腾讯新闻 他们的特点都是从“我的频道”区域到“频道推荐”之间来回交换，如下图： 改进版实现效果 源码地址：https://github.com/DrJia/TagManageEditor ...
RuoshuiNews.rar_android_news_新闻客户_新闻客户端
09-24
RuoshuiNews是一款专为Android平台设计的新闻客户端应用，旨在提供便捷的手机新闻浏览体验。这款应用允许用户轻松地获取各类新闻资讯，包括国内外时事、科技动态、娱乐八卦、体育赛事等多元化内容，满足不同用户的...
仿UC新闻导航tab滑动
11-11
【标题】"仿UC新闻导航tab滑动"指的是在Android应用开发中，模仿UC浏览器的新闻导航栏实现一个可滑动切换的标签页功能。UC浏览器的新闻导航栏通常包含多个标签，用户可以通过左右滑动来浏览不同的新闻类别，如国内、...
News App Flutter完整Android/iOS的应用新闻类头条应用程序
最新发布
01-28
News App Flutter完整Android/iOS的应用程序新闻应用程序 Ultimate Flutter News App（InitNews）是一个Flutter完整应用程序，允许您使用Android/iOS的应用程序新闻应用程序，该应用程序的许多不同功能已经开发，为...
基于Android studio编写的一款新闻app
01-11
【Android Studio开发新闻应用】 Android Studio是Google推出的一款强大的Android应用程序开发工具，它基于IntelliJ IDEA，提供了高效的代码编辑、构建、调试和分析功能，是Android开发者首选的集成开发环境（IDE）...
用js简单实现悬浮标题时，对应的内容（图片，文字）切换，超简单的js代码
qq_44760912的博客
10-31 2166
js实现悬浮标题时，对应的内容（图片，文字）切换 HTML主要代码如下 <div id="mainbox"> <!------------------第一个div-----------------------------> <div id="menu1box" class="menu1box"> <ul id="menus1" class="menu01...
iOS开发那些事-故事板实现标签导航
weixin_30622181的博客
03-18 38
故事板实现标签导航 用故事板技术实现标签导航模式。 使用“Tabbed Application”模版，创建一个名为 “TabNavigationStoryborad”的工程。勾选“Use Storyborads”、“Use Automatic Reference Counting”。创建完成之后打开MainStoryboard.storyboard。 三个Controll...
Android 模仿新闻顶部导航标签
cc杂货圈
11-06 1618
最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。 那么大致上我们会用到这些知识。 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步。 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的Ho
android chrome 去除推荐新闻以及 最近访问的标签
热门推荐
wolframalpha的博客
04-12 1万+
首先打开Chrome，在地址栏中输入chrme://flags,在搜索栏中输入enable-ntp-remote-suggestions，并把default改成disabled.重启一下，首页推送的新闻就没有了。然后同样在搜索框中输入如下内容，改成disabled...
【UGUI】无限列表 ScrollView List
Garsonlab
05-02 4987
无线列表的实现好处有一些，主要方法是在ScrollView的值改变的时候改变已存在的渲染子节点位置。最核心的是计算Content的大小及里面的节点位置设置。 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; name
android 新闻标签 拖拽,DragDropListView
weixin_29854481的博客
05-27 167
Travis master: This project can help developers implement drag and drop effects quickly.Gradledependencies {...compile 'cc.solart:dragdrop:1.1.0'}Usageyou can use DragDropListView as GridView, just ad...
Android 高仿腾讯新闻视频切换效果
weixin_34080903的博客
04-15 470
是的，你没看错，又是腾讯视频！又是高仿！没办法啊，产(傻)品(子)喜欢抄袭别人 Picture 还是上效果图吧(渣渣千元机，有点卡) Picture 同样是新闻客户端，为什么你这么优秀。 Picture 好了，吐槽完毕，看看demo的效果。 Picture 跟原效果还是有点差别的。 Picture 拆解一下页面效果吧： 新闻页面视频滚动到屏幕中间自动播放(wifi下,demo没有判断) 点...
PHP后台驱动的Android新闻应用开发教程
"基于PHP后台的Android新闻浏览客户端" 在开发基于PHP后台的Android新闻浏览客户端时，我们需要考虑的关键技术点包括PHP服务器端的构建、MySQL数据库的交互以及Android客户端的UI设计和网络数据处理。下面将详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值