鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > cms安装教程 > 新云cms > >

仿网易新闻UI界面(TabHost+导航)

来源:互联网 作者:佚名 时间:2015-08-11 09:15
第一步 效果图 第二步 布局 ?xml version=1.0 encoding=utf-8? LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=fill_parent android:layout_height=fill_parent android:orientation=vertical TabHost androi

第一步 效果图

 



第二步  布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >


            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0.0dip"
                android:layout_weight="1.0" >
            </FrameLayout>


            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />


            <RelativeLayout
                android:id="@+id/layout_bottom"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >


                <RadioGroup
                    android:id="@+id/radiogroup"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:background="@drawable/bottombg"
                    android:gravity="center_vertical"
                    android:orientation="horizontal" >


                    <RadioButton
                        android:id="@+id/radio_news"
                        android:layout_width="wrap_content"
                        android:background="@drawable/tab_selector_news"
                        android:button="@null"
                        android:checked="true" />


                    <RadioButton
                        android:id="@+id/radio_topic"
                        android:layout_width="wrap_content"
                        android:background="@drawable/tab_selector_topic"
                        android:button="@null" />


                    <RadioButton
                        android:id="@+id/radio_pic"
                        android:layout_width="wrap_content"
                        android:background="@drawable/tab_selector_pic"
                        android:button="@null" />


                    <RadioButton
                        android:id="@+id/radio_follow"
                        android:layout_width="wrap_content"
                        android:background="@drawable/tab_selector_follow"
                        android:button="@null" />


                    <RadioButton
                        android:id="@+id/radio_vote"
                        android:layout_width="wrap_content"
                        android:background="@drawable/tab_selector_vote"
                        android:button="@null" />
                </RadioGroup>
            </RelativeLayout>
        </LinearLayout>
    </TabHost>


</LinearLayout>





第三  selector+布局




<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:drawable="@drawable/current_comment_tab" 
        android:state_checked="true"/>
    <item android:drawable="@drawable/back_comment_tab" 
        android:state_checked="false"/>


</selector>





package com.and.netease;
//Download by http://www.codefans.net
import com.and.netease.utils.MoveBg;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TabHost;


public class MainActivity extends TabActivity {
TabHost tabHost;
TabHost.TabSpec tabSpec;
RadioGroup radioGroup;
RelativeLayout bottom_layout;
ImageView img;
int startLeft;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        bottom_layout = (RelativeLayout) findViewById(R.id.layout_bottom);
        
        tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("news").setIndicator("News").setContent(new Intent(this, TabNewsActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("topic").setIndicator("Topic").setContent(new Intent(this, TabTopicActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("picture").setIndicator("Picture").setContent(new Intent(this, TabPicActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("follow").setIndicator("Follow").setContent(new Intent(this, TabFollowActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("vote").setIndicator("Vote").setContent(new Intent(this, TabVoteActivity.class)));
        
        radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        radioGroup.setOnCheckedChangeListener(checkedChangeListener);
        
        img = new ImageView(this);
        img.setImageResource(R.drawable.tab_front_bg);
        bottom_layout.addView(img);
    }
    
private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {


@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radio_news:
tabHost.setCurrentTabByTag("news");
//moveFrontBg(img, startLeft, 0, 0, 0);
MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);
startLeft = 0;
break;
case R.id.radio_topic:
tabHost.setCurrentTabByTag("topic");
MoveBg.moveFrontBg(img, startLeft, img.getWidth(), 0, 0);
startLeft = img.getWidth();
break;
case R.id.radio_pic:
tabHost.setCurrentTabByTag("picture");
MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 2, 0, 0);
startLeft = img.getWidth() * 2;
break;
case R.id.radio_follow:
tabHost.setCurrentTabByTag("follow");
MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 3, 0, 0);
startLeft = img.getWidth() * 3;
break;
case R.id.radio_vote:
tabHost.setCurrentTabByTag("vote");
MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 4, 0, 0);
startLeft = img.getWidth() * 4;
break;


default:
break;
}
}
};
}







package com.and.netease;


import com.and.netease.utils.MoveBg;


import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TextView;


public class TabNewsActivity extends Activity {
RelativeLayout layout;
TextView tv_front;//需要移动的View


TextView tv_bar_news;
TextView tv_bar_sport;
TextView tv_bar_play;
TextView tv_bar_finance;
TextView tv_bar_science;
TextView tv_bar_more;





@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_news);


initViews();
}


private void initViews() {
layout = (RelativeLayout) findViewById(R.id.layout_title_bar);


tv_bar_news = (TextView) findViewById(R.id.tv_title_bar_news);
tv_bar_sport = (TextView) findViewById(R.id.tv_title_bar_sport);
tv_bar_play = (TextView) findViewById(R.id.tv_title_bar_play);
tv_bar_finance = (TextView) findViewById(R.id.tv_title_bar_finance);
tv_bar_science = (TextView) findViewById(R.id.tv_title_bar_science);
tv_bar_more = (TextView) findViewById(R.id.tv_title_bar_more);


tv_bar_news.setOnClickListener(onClickListener);
tv_bar_sport.setOnClickListener(onClickListener);
tv_bar_play.setOnClickListener(onClickListener);
tv_bar_finance.setOnClickListener(onClickListener);
tv_bar_science.setOnClickListener(onClickListener);
tv_bar_more.setOnClickListener(onClickListener);


tv_front = new TextView(this);
tv_front.setBackgroundResource(R.drawable.slidebar);
tv_front.setTextColor(Color.WHITE);
tv_front.setText("头条");
tv_front.setGravity(Gravity.CENTER);
RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
param.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
layout.addView(tv_front, param);


}


private OnClickListener onClickListener = new OnClickListener() {
int startX;//移动的起始位置


@Override
public void onClick(View v) {
avg_width = findViewById(R.id.layout).getWidth();
switch (v.getId()) {
case R.id.tv_title_bar_news:
MoveBg.moveFrontBg(tv_front, startX, 0, 0, 0);
startX = 0;
tv_front.setText(R.string.title_news_category_tops);
break;
case R.id.tv_title_bar_sport:
MoveBg.moveFrontBg(tv_front, startX, avg_width, 0, 0);
startX = avg_width;
tv_front.setText(R.string.title_news_category_sport);
break;
case R.id.tv_title_bar_play:
MoveBg.moveFrontBg(tv_front, startX, avg_width * 2, 0, 0);
startX = avg_width * 2;
tv_front.setText(R.string.title_news_category_play);
break;
case R.id.tv_title_bar_finance:
MoveBg.moveFrontBg(tv_front, startX, avg_width * 3, 0, 0);
startX = avg_width * 3;
tv_front.setText(R.string.title_news_category_finance);
break;
case R.id.tv_title_bar_science:
MoveBg.moveFrontBg(tv_front, startX, avg_width * 4, 0, 0);
startX = avg_width * 4;
tv_front.setText(R.string.title_news_category_science);
break;
case R.id.tv_title_bar_more:
MoveBg.moveFrontBg(tv_front, startX, avg_width * 5, 0, 0);
startX = avg_width * 5;
tv_front.setText(R.string.title_news_category_more);
break;


default:
break;
}


}
};


}




package com.and.netease.utils;


import android.view.View;
import android.view.animation.TranslateAnimation;


public class MoveBg {
/**
* 移动方法

* @param v
*            需要移动的View
* @param startX
*            起始x坐标
* @param toX
*            终止x坐标
* @param startY
*            起始y坐标
* @param toY
*            终止y坐标
*/
public static void moveFrontBg(View v, int startX, int toX, int startY, int toY) {
TranslateAnimation anim = new TranslateAnimation(startX, toX, startY, toY);
anim.setDuration(200);
anim.setFillAfter(true);
v.startAnimation(anim);
}
}

网友评论
<