健康栏目

一 效果

由于有错误 无法运行 

二 核心代码

1.HealthActivity.java
package com.example.walkersimulate;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

@SuppressLint("NewApi")
public class HealthActivity extends Activity
{
	private int currIndex;// 当前页卡编号
	private TextView tvCursor;
	private TextView tvHealthNews;
	private TextView tvIllnessDefense;
	private ViewPager vpHealth;
	private ImageView ivHealthBack;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_health);
		initViews();
		initCursor();
		initViewPager();
		setListeners();
	}

	private void initViews()
	{
		ivHealthBack = (ImageView) findViewById(R.id.icons_health_back);
		tvCursor = (TextView) findViewById(R.id.cursor);
		tvHealthNews = (TextView) findViewById(R.id.tv_healthnews);
		tvIllnessDefense = (TextView) findViewById(R.id.tv_healthill);
		vpHealth = (ViewPager) findViewById(R.id.viewpager);
	}

	private void initCursor()
	{
		Display display = getWindow().getWindowManager().getDefaultDisplay();
		DisplayMetrics metrics = new DisplayMetrics();
		display.getMetrics(metrics);
		// 取得手机屏幕宽度的一半
		int tabLineLength = metrics.widthPixels / 2;
		// 设置游标的宽度为屏幕宽度的一半
		LayoutParams lp = (LayoutParams) tvCursor.getLayoutParams();
		lp.width = tabLineLength;
		tvCursor.setLayoutParams(lp);
	}

	private void initViewPager()
	{
		vpHealth = (ViewPager) findViewById(R.id.viewpager);
		List<View> views = new ArrayList<View>();
		views.add(new HealthWebView(this)
				.getView("http://cms.hxky.cn/wap/jkxz/"));
		views.add(new HealthWebView(this)
				.getView("http://cms.hxky.cn/wap/jbfz/"));
		vpHealth.setAdapter(new HealthViewPagerAdapter(views));
		// 给 ViewPager 设置适配器
		vpHealth.setCurrentItem(0);// 设置当前显示标签页为第一页
	}

	private void setListeners()
	{
		// 返回按钮
		ivHealthBack.setOnClickListener(new OnClickListener()
		{
			public void onClick(View arg0)
			{
				finish();
			}
		});
		// 点击健康须知
		tvHealthNews.setOnClickListener(new OnClickListener()
		{
			public void onClick(View view)
			{
				vpHealth.setCurrentItem(0);
			}
		});
		// 点击疾病防治
		tvIllnessDefense.setOnClickListener(new OnClickListener()
		{
			public void onClick(View view)
			{
				vpHealth.setCurrentItem(1);
			}
		});
		vpHealth.setOnPageChangeListener(new OnPageChangeListener()
		{
			public void onPageSelected(int position)
			{
				currIndex = position;
			}

			public void onPageScrolled(int position, float percent, int ag2)
			{
				LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tvCursor
						.getLayoutParams();
				if (currIndex == position)
				{
					ll.leftMargin = (int) (currIndex * tvCursor.getWidth() + percent
							* tvCursor.getWidth());
				} else if (currIndex > position)
				{
					ll.leftMargin = (int) (currIndex * tvCursor.getWidth() - (1 - percent)
							* tvCursor.getWidth());
				}
				tvCursor.setLayoutParams(ll);
			}

			public void onPageScrollStateChanged(int position)
			{
			}
		});
	}
}
2.HealthViewPagerAdapter.java

package com.example.walkersimulate;


import java.util.List;


import android.view.View;
import android.view.ViewGroup;


public class HealthViewPagerAdapter
{
	private List<View> viewList;


	public HealthViewPagerAdapter(List<View> viewList)
	{
		this.viewList = viewList;
	}


	public int getCount()
	{
		return viewList.size();
	}


	public boolean isViewFromObject(View view, Object object)
	{
		return view == object;
	}


	public Object instantiateItem(ViewGroup container, int position)
	{
		container.addView(viewList.get(position));
		return viewList.get(position);
	}


	public void destroyItem(ViewGroup container, int position, Object object)
	{
		container.removeView(viewList.get(position));
	}
}

3.HealthWebView.java

package com.example.walkersimulate;


import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class HealthWebView{
	private Context context;
	public HealthWebView(Context context) {
	this.context = context;
	} 
	@SuppressLint("SetJavaScriptEnabled")
	public View getView(String url) {
	View view = LayoutInflater.from(context).inflate(
	R.layout.pagerofhealth, null);
	WebView webView = (WebView) view.findViewById(R.id.wvHealth);
	webView.loadUrl(url);
	// 设置支持 JavaScript 脚本
	webView.getSettings().setJavaScriptEnabled(true);
	/**
	* 禁止系统浏览器打开页面
	*/
	webView.setWebViewClient(new WebViewClient() {
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
	view.loadUrl(url);
	return true;
	}
	});
	return view;
	}
}

4.activity_health.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".HealthActivity" >


    <include layout="@layout/health_layout_titlebar" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <!-- 健康新知 -->


        <TextView
            android:id="@+id/tv_healthnews"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="6dp"
            android:text="@string/healthnews"
            android:textSize="18sp" />
        <!-- 疾病防治 -->


        <TextView
            android:id="@+id/tv_healthill"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="6dp"
            android:text="@string/illdefense"
            android:textSize="18sp" />
    </LinearLayout>


    <TextView
        android:id="@+id/cursor"
        android:layout_width="125dp"
        android:layout_height="5dp"
        android:layout_marginLeft="20dp"
        android:background="#990033" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

5.health_layout_titlebar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/titlebar_bg" >


    <ImageView
        android:id="@+id/icons_health_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:paddingLeft="6dp"
        android:src="@drawable/icons_health_back" />


    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="健康"
        android:textColor="#ffffff"
        android:textSize="15sp" />


</LinearLayout>

三 总结 

通过这次练习，学会了一些UI布局的应用，让UI页面更加的多彩 ，虽然没能成功达到实验预想的效果，但也学到了一些方法和流程。