WeChat のモーメントへの投稿と画像効果の閲覧を模倣する Android 開発サンプルコード-WeChatの開発-php.cn

ホームページ

WeChat アプレット

WeChatの開発

WeChat のモーメントへの投稿と画像効果の閲覧を模倣する Android 開発サンプルコード

高洛峰

Mar 23, 2017 pm 01:30 PM

この記事では主に、Android が WeChat を模倣して Moments に写真を送信する効果に関する関連情報を紹介します。必要な友達は参考にしてください。

まず効果を見てみましょう:

WeChat のモーメントへの投稿と画像効果の閲覧を模倣する Android 開発サンプルコード

その方法について話しましょう。それを実現します:

実装アイデア

1. まず、各コメント(名前、タイトル、画像配列を含む)であるデータソースを取得する必要があります
2.アダプター (GridView でネストされた ListView)
3. 画像をクリックして画像を参照します (Fragment+ViewPager)

具体的な実装

1.アダプターについては、コードを見てください:

public class MyActivity extends Activity {
  /*图片显示列表*/
  private ListView listView;
  /*图片URL数组*/
  private List<ContentBean> contentBeans;
  /*说说适配器*/
  private MyAdapter adapter;

  /**
   * Called when the activity is first created.
   */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    initData();
    initViews();
  }

  /**
   * 初始化数据
   */
  private void initData(){
    contentBeans = new ArrayList<ContentBean>();
    ArrayList<String> imgUrls1 = new ArrayList<String>();
    imgUrls1.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    ContentBean cb1 = new ContentBean(1,"java","Sun Microsystems",imgUrls1);
    contentBeans.add(cb1);

    ArrayList<String> imgUrls2 = new ArrayList<String>();
    imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    ContentBean cb2 = new ContentBean(2,"OC","Stepstone",imgUrls2);
    contentBeans.add(cb2);

    ArrayList<String> imgUrls3 = new ArrayList<String>();
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");
    ContentBean cb3 = new ContentBean(3,"python","Guido van Rossum",imgUrls3);
    contentBeans.add(cb3);
  }


  private void initViews(){
    listView = (ListView) findViewById(R.id.lv_my);
    adapter = new MyAdapter(MyActivity.this,contentBeans);
    listView.setAdapter(adapter);
  }
}

ログイン後にコピー

ここの写真は、Qiniu にアップロードしたオンライン写真です。以下に特定の ImageLoader 構成もあります。

2. アダプターの内容を見てください
画像の GridView をスライドできない GridView に設定します

3.は画像の閲覧です。このウェブサイトには多くのデモがあり、詳細な説明もあります。以下の画像の数を監視して、setOnPageChangeListener() の画像インデックス値を変更するだけです。

public class MyAdapter extends BaseAdapter {

  private Context context;
  private List<ContentBean> data;

  public MyAdapter(Context context, List<ContentBean> data) {
    this.context = context;
    this.data = data;
  }

  @Override
  public int getCount() {
    return data.size();
  }

  @Override
  public Object getItem(int i) {
    return data.get(i);
  }

  @Override
  public long getItemId(int i) {
    return i;
  }

  @Override
  public View getView(int i, View view, ViewGroup viewGroup) {
    ViewHolder holder;
    if (view == null) {
      holder = new ViewHolder();
      view = View.inflate(context, R.layout.item, null);
      holder.gridView = (NoScrollGridView) view.findViewById(R.id.gridview);
      holder.tvName = (TextView) view.findViewById(R.id.tv_name);
      holder.tvTitle = (TextView) view.findViewById(R.id.tv_title);
      view.setTag(holder);
    } else {
      holder = (ViewHolder) view.getTag();
    }

    final ContentBean bean = data.get(i);

    holder.tvName.setText(bean.getName());
    holder.tvTitle.setText(bean.getTitle());

    if (data != null && data.size() > 0) {
      holder.gridView.setAdapter(new ImageGridAdapter(context, bean.getImgUrls()));
    }
    /**
     * 图片列表点击事件
     */
    holder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Intent intent = new Intent(context, ImagePagerActivity.class);
        intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, (Serializable) bean.getImgUrls());
        intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, i);
        context.startActivity(intent);
      }
    });

    return view;
  }

  class ViewHolder {
    TextView tvName, tvTitle;
    NoScrollGridView gridView;
  }
}

ログイン後にコピー

Picture Fragment 長押しクリックイベントと画像読み込みステータスを含む詳細なインターフェース

/**
 * 图片查看器
 */
public class ImagePagerActivity extends FragmentActivity {
  private static final String STATE_POSITION = "STATE_POSITION";
  public static final String EXTRA_IMAGE_INDEX = "image_index"; 
  public static final String EXTRA_IMAGE_URLS = "image_urls";

  private HackyViewPager mPager;
  private int pagerPosition;
  private TextView indicator;

  @Override 
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.image_detail_pager);

    pagerPosition = getIntent().getIntExtra(EXTRA_IMAGE_INDEX, 0);
    ArrayList<String> urls = getIntent().getStringArrayListExtra(EXTRA_IMAGE_URLS);

    mPager = (HackyViewPager) findViewById(R.id.pager);
    ImagePagerAdapter mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), urls);
    mPager.setAdapter(mAdapter);
    indicator = (TextView) findViewById(R.id.indicator);

    CharSequence text = getString(R.string.viewpager_indicator, 1, mPager.getAdapter().getCount());
    indicator.setText(text);
    // 更新下标
    mPager.setOnPageChangeListener(new OnPageChangeListener() {

      @Override
      public void onPageScrollStateChanged(int arg0) {
      }

      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2) {
      }

      @Override
      public void onPageSelected(int arg0) {
        CharSequence text = getString(R.string.viewpager_indicator, arg0 + 1, mPager.getAdapter().getCount());
        indicator.setText(text);
      }

    });
    if (savedInstanceState != null) {
      pagerPosition = savedInstanceState.getInt(STATE_POSITION);
    }

    mPager.setCurrentItem(pagerPosition);
  }

  @Override
  public void onSaveInstanceState(Bundle outState) {
    outState.putInt(STATE_POSITION, mPager.getCurrentItem());
  }

  private class ImagePagerAdapter extends FragmentStatePagerAdapter {

    public ArrayList<String> fileList;

    public ImagePagerAdapter(FragmentManager fm, ArrayList<String> fileList) {
      super(fm);
      this.fileList = fileList;
    }

    @Override
    public int getCount() {
      return fileList == null ? 0 : fileList.size();
    }

    @Override
    public Fragment getItem(int position) {
      String url = fileList.get(position);
      return ImageDetailFragment.newInstance(url);
    }

  }
}

ログイン後にコピー

ImageLoader の初期化を忘れていました。全員に追加します。Application に書きました。

package com.hankkin.WeiXinLookImgsDemo.activty;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.hankkin.WeiXinLookImgsDemo.R;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;
import com.others.PhotoViewAttacher;

/**
 * 单张图片显示Fragment
 */
public class ImageDetailFragment extends Fragment {
  private String mImageUrl;
  private ImageView mImageView;
  private ProgressBar progressBar;
  private PhotoViewAttacher mAttacher;

  public static ImageDetailFragment newInstance(String imageUrl) {
    final ImageDetailFragment f = new ImageDetailFragment();

    final Bundle args = new Bundle();
    args.putString("url", imageUrl);
    f.setArguments(args);

    return f;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mImageUrl = getArguments() != null ? getArguments().getString("url") : null;
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);
    mImageView = (ImageView) v.findViewById(R.id.image);
    mAttacher = new PhotoViewAttacher(mImageView);

    mAttacher.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {

      @Override
      public void onPhotoTap(View arg0, float arg1, float arg2) {
        getActivity().finish();
      }
    });
    mAttacher.setOnLongClickListener(new View.OnLongClickListener() {
      @Override
      public boolean onLongClick(View view) {
        Toast.makeText(getActivity().getApplicationContext(),"保存",Toast.LENGTH_SHORT).show();
        return false;
      }
    });
    progressBar = (ProgressBar) v.findViewById(R.id.loading);
    return v;
  }

  @Override
  public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    ImageLoader.getInstance().displayImage(mImageUrl, mImageView, new SimpleImageLoadingListener() {
      @Override
      public void onLoadingStarted(String imageUri, View view) {
        progressBar.setVisibility(View.VISIBLE);
      }

      @Override
      public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
        String message = null;
        switch (failReason.getType()) {
        case IO_ERROR:
          message = "下载错误";
          break;
        case DECODING_ERROR:
          message = "图片无法显示";
          break;
        case NETWORK_DENIED:
          message = "网络有问题，无法下载";
          break;
        case OUT_OF_MEMORY:
          message = "图片太大无法显示";
          break;
        case UNKNOWN:
          message = "未知的错误";
          break;
        }
        Toast.makeText(getActivity(), message, Toast.LENGTH_SHORT).show();
        progressBar.setVisibility(View.GONE);
      }

      @Override
      public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        progressBar.setVisibility(View.GONE);
        mAttacher.update();
      }
    });
  }
}

ログイン後にコピー

以上は、Android が WeChat を模倣して Moments に写真を送信する効果について述べたもので、皆さんが Android ソフトウェアプログラミングを学ぶのに役立つことを願っています。

以上がWeChat のモーメントへの投稿と画像効果の閲覧を模倣する Android 開発サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。