健康栏目

一 效果

由于有错误 无法运行 

二 核心代码

1.HealthActivity.javapackage 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;@Overrideprotected 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页面更加的多彩 ，虽然没能成功达到实验预想的效果，但也学到了一些方法和流程。