用过微信的都知道,第一次启动时会出现一系列操作说明或功能说明的画面,滑到底然后就进入正式界面,今天我也参考网络资源模仿着做了一个。
首先看下工程结构图:
首先看布局文件main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainRLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#000000" > <!-- 自定义滑动控件 --> <com.ericssonlabs.ScrollLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ScrollLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="visible" > <!-- 每一页的布局均以一个RelativeLayout来控制,后面类似,这里一共四个 --> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/w01" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="90dp" android:text="微信,不只是个聊天工具" android:textColor="#FFFFFF" android:textSize="18sp" /> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/w02" > <TextView android:id="@+id/t1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="96dp" android:gravity="center_horizontal" android:text="第一次,你可以使用透明背景的动画表情,来表达你此刻的心情" android:textColor="#FFFFFF" android:textSize="18sp" /> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/w03" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/w01" > <!-- 点击该按钮后就进入OtherActivit了 --> <Button android:id="@+id/startBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_gravity="center_vertical" android:layout_marginBottom="90dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:background="@drawable/button_bg" android:text="开始我的微信生活" android:textColor="#FFFFFF" android:textSize="18sp" /> </RelativeLayout> </com.ericssonlabs.ScrollLayout> <!-- 这个布局是下面显示的小圆点的布局,其中ImageView的数量要与上面RelativeLayout的数量对应 --> <LinearLayout android:id="@+id/llayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="25dp" android:orientation="horizontal" android:visibility="visible" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dp" android:src="/blog_article/@drawable/page_indicator_bg/index.html" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dp" android:src="/blog_article/@drawable/page_indicator_bg/index.html" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dp" android:src="/blog_article/@drawable/page_indicator_bg/index.html" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dp" android:src="/blog_article/@drawable/page_indicator_bg/index.html" /> </LinearLayout> <!-- 这个布局是最后点击按钮后启动新界面的一个动画效果 --> <LinearLayout android:id="@+id/animLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" > <LinearLayout android:id="@+id/leftLayout" android:layout_width="wrap_content" android:layout_height="fill_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="/blog_article/@drawable/whatsnew_left/index.html" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="/blog_article/@drawable/whatsnew_left_m/index.html" /> </LinearLayout> <LinearLayout android:id="@+id/rightLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="/blog_article/@drawable/whatsnew_right_m/index.html" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="/blog_article/@drawable/whatsnew_right/index.html" /> </LinearLayout> </LinearLayout> </RelativeLayout>
接下来是自定义控件ScrollLayout.java,这个是继承了ViewGroup的一个自定义控件,主要实现了左右滑动以及展示内容的功能,源码如下:
public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{ private ScrollLayout mScrollLayout; private ImageView[] imgs; private int count; private int currentItem; private Button startBtn; private RelativeLayout mainRLayout; private LinearLayout pointLLayout; private LinearLayout leftLayout; private LinearLayout rightLayout; private LinearLayout animLayout; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); initView(); } private void initView() { mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout); pointLLayout = (LinearLayout) findViewById(R.id.llayout); mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout); startBtn = (Button) findViewById(R.id.startBtn); startBtn.setOnClickListener(onClick); animLayout = (LinearLayout) findViewById(R.id.animLayout); leftLayout = (LinearLayout) findViewById(R.id.leftLayout); rightLayout = (LinearLayout) findViewById(R.id.rightLayout); count = mScrollLayout.getChildCount(); imgs = new ImageView[count]; for (int i = 0; i < count; i++) { imgs[i] = (ImageView) pointLLayout.getChildAt(i); imgs[i].setEnabled(true); imgs[i].setTag(i); } currentItem = 0; imgs[currentItem].setEnabled(false); mScrollLayout.SetOnViewChangeListener(this); } private View.OnClickListener onClick = new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId()) { case R.id.startBtn: mScrollLayout.setVisibility(View.GONE); pointLLayout.setVisibility(View.GONE); animLayout.setVisibility(View.VISIBLE); mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg); Animation leftOutAnimation = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.translate_left); Animation rightOutAnimation = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.translate_right); leftLayout.setAnimation(leftOutAnimation); rightLayout.setAnimation(rightOutAnimation); leftOutAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { mainRLayout.setBackgroundColor(Color.BLACK); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { leftLayout.setVisibility(View.GONE); rightLayout.setVisibility(View.GONE); Intent intent = new Intent( ScrollLayoutActivity.this, OtherActivity.class); ScrollLayoutActivity.this.startActivity(intent); ScrollLayoutActivity.this.finish(); //结束老Activity启动新Activity之前的一个过度动画 overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit); } }); break; } } }; @Override public void OnViewChange(int position) { setcurrentPoint(position); } private void setcurrentPoint(int position) { if (position < 0 || position > count - 1 || currentItem == position) { return; } imgs[currentItem].setEnabled(true); imgs[position].setEnabled(false); currentItem = position; } }
然后是定义的一个回调接口,这个接口的主要作用在代码中有注释,源码如下:
package com.ericssonlabs; public interface OnViewChangeListener { //控制底部小圆点的回调方法 public void OnViewChange(int view); }
最后是如何使用该自定义控件,在Activity中调用并使用,代码如下:
public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{ private ScrollLayout mScrollLayout; private ImageView[] imgs; private int count; private int currentItem; private Button startBtn; private RelativeLayout mainRLayout; private LinearLayout pointLLayout; private LinearLayout leftLayout; private LinearLayout rightLayout; private LinearLayout animLayout; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); initView(); } private void initView() { mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout); pointLLayout = (LinearLayout) findViewById(R.id.llayout); mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout); startBtn = (Button) findViewById(R.id.startBtn); startBtn.setOnClickListener(onClick); animLayout = (LinearLayout) findViewById(R.id.animLayout); leftLayout = (LinearLayout) findViewById(R.id.leftLayout); rightLayout = (LinearLayout) findViewById(R.id.rightLayout); count = mScrollLayout.getChildCount(); imgs = new ImageView[count]; for (int i = 0; i < count; i++) { imgs[i] = (ImageView) pointLLayout.getChildAt(i); imgs[i].setEnabled(true); imgs[i].setTag(i); } currentItem = 0; imgs[currentItem].setEnabled(false); mScrollLayout.SetOnViewChangeListener(this); } private View.OnClickListener onClick = new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId()) { case R.id.startBtn: mScrollLayout.setVisibility(View.GONE); pointLLayout.setVisibility(View.GONE); animLayout.setVisibility(View.VISIBLE); mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg); Animation leftOutAnimation = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.translate_left); Animation rightOutAnimation = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.translate_right); leftLayout.setAnimation(leftOutAnimation); rightLayout.setAnimation(rightOutAnimation); leftOutAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { mainRLayout.setBackgroundColor(Color.BLACK); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { leftLayout.setVisibility(View.GONE); rightLayout.setVisibility(View.GONE); Intent intent = new Intent( ScrollLayoutActivity.this, OtherActivity.class); ScrollLayoutActivity.this.startActivity(intent); ScrollLayoutActivity.this.finish(); //结束老Activity启动新Activity之前的一个过度动画 overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit); } }); break; } } }; @Override public void OnViewChange(int position) { setcurrentPoint(position); } private void setcurrentPoint(int position) { if (position < 0 || position > count - 1 || currentItem == position) { return; } imgs[currentItem].setEnabled(true); imgs[position].setEnabled(false); currentItem = position; } }然后是启动新界面的动画效果:
translate_left.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" > <translate android:duration="2000" android:fromXDelta="0.0" android:fromYDelta="0.0" android:toXDelta="-50.0%p" android:toYDelta="0.0" /> </set>
translate_right.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" > <translate android:duration="2000" android:fromXDelta="0.0" android:fromYDelta="0.0" android:toXDelta="50.0%p" android:toYDelta="0.0" /> </set>
zone_out_enter.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/overshoot_interpolator" > <scale android:duration="@android:integer/config_shortAnimTime" android:fromXScale="0.7" android:fromYScale="0.7" android:pivotX="50.0%" android:pivotY="50.0%" android:toXScale="1.0" android:toYScale="1.0" /> </set>
zone_out_exit.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <scale android:duration="@android:integer/config_shortAnimTime" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50.0%" android:pivotY="50.0%" android:toXScale="0.8" android:toYScale="0.8" /> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set>
关于动画这一块我还不是很熟,这里是直接copy的网上的效果,后续会专门做一个专题来研究动画,毕竟,有动画的世界才是多彩的,嘿嘿
一切就绪后,运行看看效果:
以上就是运行效果了,图片和其他的文件我没有在这里列举,这个效果在大多数项目中都 用的到,学习一下还是比较好的。需要源码的同学可以跟我联系,我的新浪微博:唐韧_Ryan
去掉Import中的:
Android.R;重新导入项目中的.R文件;
本地查询可以查询指定区域内诸如宾馆,邮局等用户感兴趣的地方。其使用方法和地址查询非常类似。
下面示例查询32.0616667, 118.7777778为中心点一定区域内宾馆的信息。
package com.pstreets.gisengine.demo.lwuit; //--------------------------------- IMPORTS ------------------------------------ import com.mapdigit.gis.MapPoint; import com.mapdigit.gis.geometry.GeoLatLng; import com.mapdigit.gis.raster.MapType; import com.mapdigit.gis.service.IGeocodingListener; import com.pstreets.gisengine.demo.MapDemoLWUIT; import com.sun.lwuit.Command; import com.sun.lwuit.events.ActionEvent; public class MapLocalSearchLWUIT extends MapDemoLWUIT implements IGeocodingListener{ private Command mapFindAddressCommand; public void startApp() { init(); canvas.setTitle("Local Search"); mapFindAddressCommand=new Command("Find Address"){ public void actionPerformed(ActionEvent evt) { String name = "宾馆"; GeoLatLng screenCenter = map.getScreenCenter(); map.getLocations(name, 0, screenCenter, map.getScreenBounds(screenCenter)); } }; canvas.addCommand(mapFindAddressCommand); GeoLatLng center = new GeoLatLng(32.0616667, 118.7777778); map.setCenter(center, 13, MapType.MICROSOFTCHINA); map.setGeocodingListener(this); canvas.show(); } public void done(String query, MapPoint[] result) { if (result != null) { map.panTo(result[0].getPoint()); for (int i = 0; i < result.length; i++) { System.out.println(result[i].objectNote); } } } }
本地查询方法
public void getLocations(String address,int start,GeoLatLng center,GeoBounds bound, IGeocodingListener listener);
指定中心点和查询区域。本地查询可以多次返回结果,start为查询结果起始顺序,每次返回结果在SearchOptions 中定义,缺省每次返回4个。
上述结果返回内容为,具体结果可能不同。
“晶丽酒店025-83310818 025-83310818212223 025-86636636 ”
“城市名人酒店025-83123333 025-83123888 ”
“南京玄武饭店 025-83358888 ”
“Sofitel Galaxy Nanjing – 南京索菲特银河大酒店025-83718888 “
LWUIT 引路蜂地图开发包Ver2.1下载