高仿网易新闻顶部滑动条效果
来源:互联网 发布:网络反监控软件 编辑:程序博客网 时间:2024/05/16 14:20
这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到。
至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢。
废话不多说,下面上代码:
首先是布局layout下的main.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:background="#ffffff" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/layoutBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/big_button_up" android:orientation="horizontal" > <RelativeLayout android:id="@+id/layout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="新闻" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="体育" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="娱乐" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="更多" /> </RelativeLayout> </LinearLayout><LinearLayout android:id="@+id/page" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_below="@+id/layoutBar" android:background="#ffffff" android:orientation="vertical" > </LinearLayout></RelativeLayout>
下面是核心类,
package cn.com.karl.slider;import android.app.Activity;import android.os.Bundle;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.view.animation.TranslateAnimation;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;public class SliderBarActivity extends Activity { /** Called when the activity is first created. */ private RelativeLayout layout;private RelativeLayout layout1;private RelativeLayout layout2;private RelativeLayout layout3;private RelativeLayout layout4;private TextView tab1;private TextView tab2;private TextView tab3;private TextView tab4;private TextView first;private int current = 1; private LinearLayout page;private boolean isAdd = false;private int select_width; private int select_height;private int firstLeft; private int startLeft; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); init(); } private void init(){layout = (RelativeLayout) findViewById(R.id.root);layout1 = (RelativeLayout) findViewById(R.id.layout1);layout2 = (RelativeLayout) findViewById(R.id.layout2);layout3 = (RelativeLayout) findViewById(R.id.layout3);layout4 = (RelativeLayout) findViewById(R.id.layout4);page=(LinearLayout) this.findViewById(R.id.page); tab1 = (TextView) findViewById(R.id.tab1);tab1.setOnClickListener(onClickListener);tab2 = (TextView) findViewById(R.id.tab2);tab2.setOnClickListener(onClickListener);tab3 = (TextView) findViewById(R.id.tab3);tab3.setOnClickListener(onClickListener);tab4 = (TextView) findViewById(R.id.tab4);tab4.setOnClickListener(onClickListener);RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);first = new TextView(this);first.setTag("first");first.setGravity(Gravity.CENTER);first.setBackgroundResource(R.drawable.slidebar);first.setText(tab1.getText());View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);page.addView(view1);switch (current) {case 1:layout1.addView(first, rl);current = R.id.tab1;break;case 2:layout2.addView(first, rl);current = R.id.tab2;break;case 3:layout3.addView(first, rl);current = R.id.tab3;break;case 4:layout4.addView(first, rl);current = R.id.tab4;break;default:break;}}private void replace() {switch (current) {case R.id.tab1:changeTop(layout1);break;case R.id.tab2:changeTop(layout2);break;case R.id.tab3:changeTop(layout3);break;case R.id.tab4:changeTop(layout4);break;default:break;}}private void changeTop(RelativeLayout relativeLayout){TextView old = (TextView) relativeLayout.findViewWithTag("first");;select_width = old.getWidth();select_height = old.getHeight();RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height);rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();TextView tv = new TextView(this);tv.setTag("move");tv.setBackgroundResource(R.drawable.slidebar);layout.addView(tv , rl);relativeLayout.removeView(old);}private OnClickListener onClickListener = new OnClickListener(){public void onClick(View v) {if(!isAdd){replace(); isAdd = true;}TextView top_select = (TextView) layout.findViewWithTag("move");top_select.setGravity(Gravity.CENTER);top_select.setText(tab1.getText());int tabLeft;int endLeft = 0;boolean run = false;switch (v.getId()) {case R.id.tab1:if (current != R.id.tab1) {page.removeAllViews();tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;endLeft = tabLeft - select_width / 2;current = R.id.tab1;top_select.setText(tab1.getText());run = true;View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);page.addView(view1);}break;case R.id.tab2:if (current != R.id.tab2) {page.removeAllViews();tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;endLeft = tabLeft - select_width / 2;current = R.id.tab2;top_select.setText(tab2.getText());run = true;View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null);page.addView(view2);}break;case R.id.tab3:if (current != R.id.tab3) {page.removeAllViews();tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;endLeft = tabLeft - select_width/2;current = R.id.tab3;top_select.setText(tab3.getText());run = true;View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null);page.addView(view3);}break;case R.id.tab4:if (current != R.id.tab4) {page.removeAllViews();tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab3.getLeft() + tab4.getWidth() / 2;endLeft = tabLeft - select_width/2;current = R.id.tab4;top_select.setText(tab4.getText());run = true;View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null);page.addView(view4);}break;default:break;}if(run){TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);startLeft = endLeft - firstLeft; animation.setDuration(100);animation.setFillAfter(true);top_select.bringToFront();top_select.startAnimation(animation);}}};}
由于时间比较紧,我没有做注释,有时间再做注释啊。
看一下效果是不是一样啊!
效果还请大家自行体验并改进,由于时间仓促,代码并未做注释,希望大家能够原谅,下面我附上源码下载地址:点击打开链接
- 高仿网易新闻顶部滑动条效果
- 高仿网易新闻顶部滑动条效果
- Android高仿网易新闻顶部滑动条效果
- 高仿网易新闻顶部滑动条效果 (源码)
- 高仿网易新闻顶部滑动条效果
- 仿网易新闻顶部滑动条效果
- 高仿网易新闻栏目动画效果
- 网易新闻顶部效果
- 高仿网易新闻头部导航条--优化版
- RecyclerView学习(二)----高仿网易新闻栏目动画效果
- 史上最简的ViewPagerIndicate,高仿网易新闻客户端效果
- 网易新闻客户端(高仿)
- 新闻客户端(高仿网易)
- 仿网易新闻页面效果
- 仿网易新闻顶部 图片的indicator
- Android仿网易新闻顶部滚动菜单
- 仿网易新闻的顶部导航指示器
- IOS轻松实现仿网易新闻顶部滑动指示器(Scrollview实现)
- 英文谚语
- hibernate注解--映射主键属性
- xml 添加xsi:schemaLocation 属性
- 初始化:普通数组 vs 指针数组 => sizeof, memset
- MVC3 导出Excel
- 高仿网易新闻顶部滑动条效果
- 人人网张铁安:Feed系统架构分析
- 临时图片链接
- 以限制模式打开数据库所应该注意的问题
- virtual继承
- 批处理
- 傅立叶变换中的吉布斯现象
- Ivy Bridge四核处理器将于四月底面世
- Android-内存溢出的解决办法 .