高仿网易新闻顶部滑动条效果

原创 2012年03月29日 11:25:32

          

         这个是网易新闻的主界面,我们知道底部可以用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);
				
			}
			
		}

	};
}

     由于时间比较紧,我没有做注释,有时间再做注释啊。

     看一下效果是不是一样啊!

   



   效果还请大家自行体验并改进,由于时间仓促,代码并未做注释,希望大家能够原谅,下面我附上源码下载地址:点击打开链接

仿网易新闻APP(五)——无限横向滑动菜单(自定义HorizontalScrollView+ViewPager)

自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果。的确HorizontalScrollView可以实现Gal...
  • kongdexiao
  • kongdexiao
  • 2015年12月20日 15:26
  • 8088

高仿网易新闻抽屉效果+横向菜单+页面滑动

  • 2014年08月14日 21:22
  • 3.55MB
  • 下载

HTML5+SWIPER仿网易新闻横滑翻页及联动

  • 2016年01月21日 23:39
  • 164KB
  • 下载

IOS轻松实现仿网易新闻顶部滑动指示器(Scrollview实现)

实现原理很简单,就是利用了scrollview进行自定义,对外部传入的scrollview滑动事件进行监听,源码如下: (1)h文件代码 // // ScrollViewIndicator.h /...
  • u013835855
  • u013835855
  • 2017年05月22日 09:59
  • 777

Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单

转载请注明出处:http://blog.csdn.net/allen315410/article/details/42914501 概述        今天这篇博客将记录一些关于DrawerL...
  • jdsjlzx
  • jdsjlzx
  • 2015年02月03日 11:56
  • 33960

仿网易新闻左右滑动菜单

  • 2016年05月04日 22:24
  • 867KB
  • 下载

Android高仿网易新闻顶部滑动条效果

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到。          至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条...
  • YUZHIBOYI
  • YUZHIBOYI
  • 2012年06月08日 14:20
  • 9847

高仿网易新闻顶部滑动条效果 (源码)

[java] view plaincopy package yy.android.slider;      import android.app.Activity; ...
  • YUZHIBOYI
  • YUZHIBOYI
  • 2012年06月08日 14:25
  • 6774

高仿网易新闻顶部滑动条效果

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到。          至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条...
  • wangkuifeng0118
  • wangkuifeng0118
  • 2012年03月29日 11:25
  • 18346

Android开发仿新闻头条上方滑动菜单事件

先来看张效果图,在首页部分,上方分为五个标题,可以滑动展示不同主题的内容。最初的实现是在首页这个frament中加入viewpager但是发现数据不显示。 所以换成了在frament中嵌套frame...
  • huangliniqng
  • huangliniqng
  • 2017年06月16日 08:54
  • 229
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:高仿网易新闻顶部滑动条效果
举报原因:
原因补充:

(最多只允许输入30个字)